:root {
  --navy:       oklch(26% 0.065 240);
  --navy-mid:   oklch(35% 0.07 240);
  --teal:       oklch(62% 0.13 28);
  --teal-light: oklch(93% 0.05 28);
  --sand:       oklch(97% 0.012 80);
  --sand-deep:  oklch(93% 0.018 80);
  --white:      #ffffff;
  --text:       oklch(20% 0.02 240);
  --text-mid:   oklch(45% 0.025 240);
  --text-light: oklch(65% 0.02 240);
  --border:     oklch(90% 0.01 240);
  --font-head:  'DM Sans', Helvetica, sans-serif;
  --font-body:  'DM Sans', Helvetica, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --r:  4px;
  --rc: 8px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); font-size: 16px; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* REVEAL */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; } .d2 { transition-delay: .24s; } .d3 { transition-delay: .38s; } .d4 { transition-delay: .52s; }

/* LAYOUT */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 40px; }

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(255,255,255,.97); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s;
}
nav.scrolled { box-shadow: 0 2px 20px oklch(26% 0.065 240 / .06); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.nav-logo { font-weight: 600; font-size: 16px; letter-spacing: -.02em; color: var(--navy); display: flex; align-items: center; gap: 7px; }
.nav-logo img { height: 40px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a {
  font-size: 16px; font-weight: 500; color: var(--text-mid);
  position: relative; padding-bottom: 3px;
  transition: color .25s;
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: 0; left: 50%; right: 50%;
  height: 1.5px; background: var(--teal); border-radius: 1px;
  transition: left .28s ease, right .28s ease;
}
.nav-links a:hover { color: var(--navy); }
.nav-links a:hover::after { left: 0; right: 0; }
.nav-links a.nav-active { color: var(--navy); font-weight: 500; }
.nav-links a.nav-active::after { left: 0; right: 0; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-cta {
  padding: 9px 20px; background: var(--navy); color: var(--white) !important;
  font-size: 13px !important; font-weight: 500 !important; border-radius: var(--r);
  border: none; cursor: pointer; font-family: inherit;
  transition: background .2s, transform .15s !important;
}
.nav-cta:hover { background: var(--navy-mid) !important; transform: translateY(-1px); }

/* Burger button */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 38px; height: 38px; background: none; border: none; cursor: pointer; padding: 6px;
}
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .3s, opacity .3s; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile dropdown */
.nav-mobile { display: none; background: var(--white); border-top: 1px solid var(--border); }
.nav-mobile.open { display: block; }
.nav-mobile ul { list-style: none; padding: 8px 0 16px; }
.nav-mobile li a { display: block; padding: 13px 24px; font-size: 15px; color: var(--text-mid); transition: color .2s; }
.nav-mobile li a:hover { color: var(--navy); }
.nav-mobile .nav-mobile-cta { color: var(--teal) !important; font-weight: 500; background: none; border: none; cursor: pointer; font-family: inherit; display: block; width: 100%; text-align: left; padding: 13px 24px; font-size: 15px; }

/* HERO */
#hero {
  padding-top: 66px; min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--sand); overflow: hidden;
  padding-left: max(40px, calc((100vw - 1160px) / 2 + 40px));
}
.hero-left { display: flex; flex-direction: column; justify-content: center; padding: 80px 40px 80px 0; }
.hero-eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 22px;
  display: flex; align-items: center; gap: 10px;
}
.hero-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--teal); }
h1.hero-title {
  font-family: var(--font-head); font-size: clamp(36px, 4.2vw, 58px);
  font-weight: 600; line-height: 1.1; letter-spacing: -.035em; color: var(--navy);
  margin-bottom: 18px;
}
h1.hero-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--teal); }
.hero-sub { font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--text-mid); margin-bottom: 40px; max-width: 420px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 52px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; font-family: var(--font-body); font-size: 15px; font-weight: 500; border-radius: var(--r); border: none; cursor: pointer; transition: background .2s, transform .15s; }
.btn-primary { background: var(--navy); color: var(--white); position: relative; overflow: hidden; }
.btn-primary::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-15deg);
  animation: btn-shimmer 3.5s ease-in-out infinite;
}
@keyframes btn-shimmer {
  0%, 45% { left: -60%; }
  65%, 100% { left: 130%; }
}
.btn-primary:hover { background: var(--navy-mid); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--navy); border: 1px solid var(--border); font-weight: 400; }
.btn-ghost:hover { border-color: var(--navy); transform: translateY(-2px); }
.btn-accent { background: var(--teal); color: var(--white); }
.btn-accent:hover { opacity: .88; transform: translateY(-2px); }
.hero-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { font-size: 12px; font-weight: 400; color: var(--text-mid); padding: 5px 12px; border-radius: 100px; border: 1px solid var(--border); background: var(--white); }

.hero-right { position: relative; overflow: hidden; will-change: transform; }
.hero-right::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(to right, var(--sand) 0%, transparent 16%), linear-gradient(to top, var(--sand) 0%, transparent 20%);
}
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-photo-placeholder {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, oklch(85% .025 220) 0, oklch(85% .025 220) 1px, transparent 1px, transparent 14px), oklch(80% .035 220);
  display: flex; align-items: center; justify-content: center;
}
.hero-photo-placeholder span { font-family: monospace; font-size: 11px; color: oklch(50% .04 220); text-align: center; line-height: 1.6; }
.hero-stat-bar {
  position: absolute; bottom: 40px; left: -20px; z-index: 3;
  background: var(--white); border-radius: var(--rc); padding: 16px 22px;
  box-shadow: 0 10px 36px oklch(26% .065 240 / .12);
  display: flex; gap: 28px;
}
.hero-stat { text-align: center; }
.hero-stat-n { font-size: 22px; font-weight: 700; letter-spacing: -.04em; color: var(--navy); line-height: 1; }
.hero-stat-l { font-size: 11px; color: var(--text-light); margin-top: 3px; }

/* ABOUT */
#about { background: var(--white); padding: 80px 0; border-bottom: 1px solid var(--border); }
.about-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: center; }
.about-photo-wrap {
  aspect-ratio: 3/4; border-radius: var(--rc); overflow: hidden;
  background: repeating-linear-gradient(-45deg, oklch(91% .018 220) 0, oklch(91% .018 220) 1px, transparent 1px, transparent 12px), oklch(87% .025 220);
  display: flex; align-items: center; justify-content: center;
}
.about-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.about-photo-wrap span { font-family: monospace; font-size: 11px; color: oklch(52% .04 220); text-align: center; line-height: 1.6; padding: 16px; }
.about-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.about-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--teal); }
.about-title { font-size: clamp(26px, 2.8vw, 38px); font-weight: 600; letter-spacing: -.03em; color: var(--navy); line-height: 1.15; margin-bottom: 18px; }
.about-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--teal); }
.about-text { font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--text-mid); margin-bottom: 28px; }
.about-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-size: 12px; padding: 6px 14px; border-radius: 100px; background: var(--sand); color: var(--navy); font-weight: 400; border: 1px solid var(--border); }

/* SERVICES */
#services { background: var(--sand); padding: 100px 0; }
.sec-head { margin-bottom: 52px; }
.sec-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.sec-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--teal); }
.sec-title { font-size: clamp(26px, 3vw, 40px); font-weight: 600; letter-spacing: -.03em; color: var(--navy); line-height: 1.15; }
.sec-sub { font-size: 16px; font-weight: 300; color: var(--text-mid); line-height: 1.7; max-width: 520px; margin-top: 12px; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.srv-card { background: var(--white); border-radius: var(--rc); overflow: hidden; border: 1px solid var(--border); transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column; }
.srv-card:hover { transform: translateY(-5px); box-shadow: 0 20px 52px oklch(26% .065 240 / .09); }
.srv-card-wide { grid-column: span 2; }
.srv-img { height: 190px; background: repeating-linear-gradient(-45deg, oklch(92% .018 220) 0, oklch(92% .018 220) 1px, transparent 1px, transparent 12px), oklch(88% .025 220); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
.srv-card-wide .srv-img { height: 210px; }
.srv-img span { font-family: monospace; font-size: 10px; color: oklch(55% .04 220); text-align: center; line-height: 1.6; }
.srv-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.srv-body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.srv-tag { font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
.srv-name { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--navy); margin-bottom: 9px; line-height: 1.3; }
.srv-desc { font-size: 15px; font-weight: 300; color: var(--text-mid); line-height: 1.65; margin-bottom: 18px; flex: 1; }
.srv-link { font-size: 14px; font-weight: 500; color: var(--teal); display: inline-flex; align-items: center; gap: 6px; transition: gap .25s ease, color .25s; }
.srv-link span { display: inline-block; transition: transform .25s ease; }
.srv-link:hover { gap: 10px; color: oklch(52% .15 28); }
.srv-link:hover span { transform: translateX(4px); }
.srv-price { font-size: 12px; color: var(--text-light); margin-top: 6px; }

/* CASES */
#cases { background: var(--navy); padding: 100px 0; }
#cases .sec-eyebrow { color: var(--teal); }
#cases .sec-eyebrow::before { background: var(--teal); }
#cases .sec-title { color: var(--white); }
#cases .sec-sub { color: oklch(72% .03 240); }
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.case-card { border-radius: var(--rc); overflow: hidden; background: oklch(32% .06 240); border: 1px solid oklch(35% .05 240); transition: transform .25s; }
.case-card:hover { transform: translateY(-4px); }
.case-img { height: 210px; background: repeating-linear-gradient(45deg, oklch(35% .07 235) 0, oklch(35% .07 235) 1px, transparent 1px, transparent 14px), oklch(30% .06 235); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.case-img span { font-family: monospace; font-size: 10px; color: oklch(58% .05 220); text-align: center; line-height: 1.6; }
.case-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-body { padding: 22px; }
.case-client { font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
.case-title { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 9px; letter-spacing: -.01em; line-height: 1.3; }
.case-desc { font-size: 15px; font-weight: 300; color: oklch(68% .03 240); line-height: 1.65; margin-bottom: 16px; }
.case-result { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--teal); font-weight: 500; }
.case-result::before { content: ''; width: 14px; height: 1px; background: var(--teal); }

/* AI */
#ai { background: var(--white); padding: 100px 0; overflow: hidden; }
.ai-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.ai-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; background: var(--teal-light); border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: oklch(40% .1 28); margin-bottom: 26px; }
.ai-title { font-size: clamp(24px, 2.8vw, 38px); font-weight: 600; letter-spacing: -.03em; color: var(--navy); line-height: 1.15; margin-bottom: 18px; }
.ai-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--teal); }
.ai-desc { font-size: 16px; font-weight: 300; color: var(--text-mid); line-height: 1.7; margin-bottom: 28px; }
.ai-list { display: flex; flex-direction: column; gap: 12px; }
.ai-item { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; color: var(--text-mid); line-height: 1.55; }
.ai-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0; margin-top: 5px; }
.ai-compare { position: relative; border-radius: var(--rc); overflow: hidden; aspect-ratio: 3/2; background: var(--sand-deep); cursor: col-resize; user-select: none; }
.ai-cmp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ai-cmp-before-wrap { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.ai-cmp-handle { position: absolute; top: 0; left: 50%; bottom: 0; width: 3px; background: #fff; transform: translateX(-50%); cursor: col-resize; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ai-cmp-btn { width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: 0 2px 14px oklch(0 0 0 / .22); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--navy); flex-shrink: 0; letter-spacing: -.05em; pointer-events: none; }
.ai-cmp-label { position: absolute; bottom: 10px; padding: 3px 10px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; pointer-events: none; }
.ai-lbl-b { left: 10px; background: oklch(22% .01 240 / .65); color: #fff; }
.ai-lbl-a { right: 10px; background: var(--teal); color: #fff; }

/* REVIEWS */
#reviews { background: var(--sand); padding: 100px 0; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.rev-card { background: var(--white); border-radius: var(--rc); padding: 28px 28px 24px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
.rev-stars { display: flex; gap: 3px; }
.star { width: 13px; height: 13px; background: oklch(78% .13 70); clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.rev-text { font-size: 14px; font-weight: 300; font-style: italic; color: var(--text); line-height: 1.75; flex: 1; }
.rev-author { display: flex; align-items: center; gap: 11px; padding-top: 14px; border-top: 1px solid var(--border); }
.rev-av { width: 38px; height: 38px; border-radius: 50%; background: var(--teal-light); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: oklch(40% .1 28); flex-shrink: 0; }
.rev-name { font-size: 14px; font-weight: 600; color: var(--navy); }
.rev-role { font-size: 12px; color: var(--text-light); margin-top: 1px; }

/* FAQ */
#faq { background: var(--white); padding: 100px 0; }
.faq-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; }
.faq-intro p { font-size: 16px; font-weight: 300; color: var(--text-mid); line-height: 1.7; margin-top: 14px; }
.faq-list { border: 1px solid var(--border); border-radius: var(--rc); overflow: hidden; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-q { width: 100%; background: none; border: none; cursor: pointer; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; text-align: left; transition: background .2s; }
.faq-q:hover { background: var(--sand); }
.faq-q-text { font-size: 16px; font-weight: 500; color: var(--navy); line-height: 1.4; }
.faq-icon { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; color: var(--text-mid); transition: background .2s, border-color .2s, transform .3s; }
.faq-item.open .faq-icon { background: var(--navy); border-color: var(--navy); color: #fff; transform: rotate(45deg); }
.faq-ans { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-item.open .faq-ans { max-height: 280px; }
.faq-ans-inner { padding: 0 26px 22px; font-size: 15px; font-weight: 300; color: var(--text-mid); line-height: 1.75; }
.faq-ans-inner strong { color: var(--navy); font-weight: 600; }

/* GEO */
#geo { background: var(--sand); padding: 80px 0; border-top: 1px solid var(--border); }
.geo-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: stretch; }
.geo-map { min-height: 400px; border-radius: var(--rc); overflow: hidden; align-self: stretch; }
.geo-map iframe { display: block; width: 100%; height: 100%; }
.geo-cities { display: flex; flex-direction: column; gap: 0; margin-top: 28px; border: 1px solid var(--border); border-radius: var(--rc); overflow: hidden; }
.geo-city { padding: 14px 20px; background: var(--white); border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text-mid); display: flex; align-items: center; gap: 12px; }
.geo-city:last-child { border-bottom: none; }
.geo-city::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.geo-city strong { color: var(--navy); font-weight: 500; }

/* CTA */
#cta { background: var(--navy); padding: 100px 0; position: relative; overflow: hidden; }
#cta::before { content: ''; position: absolute; top: -100px; right: -60px; width: 460px; height: 460px; border-radius: 50%; background: oklch(36% .08 200 / .22); pointer-events: none; }
#cta::after  { content: ''; position: absolute; bottom: -140px; left: -40px; width: 360px; height: 360px; border-radius: 50%; background: oklch(62% .13 28 / .07); pointer-events: none; }
.cta-inner { text-align: center; position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.cta-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin-bottom: 18px; }
.cta-title { font-size: clamp(30px, 4vw, 52px); font-weight: 600; letter-spacing: -.035em; color: #fff; line-height: 1.1; margin-bottom: 18px; }
.cta-sub { font-size: 17px; font-weight: 300; color: oklch(72% .03 240); margin-bottom: 44px; line-height: 1.6; }
.cta-form { display: flex; flex-direction: column; gap: 10px; max-width: 480px; margin: 0 auto 16px; }
.cta-form-simple { flex-direction: row; max-width: 420px; }
.cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cta-input { flex: 1; padding: 13px 16px; background: oklch(100% 0 0 / .07); border: 1px solid oklch(100% 0 0 / .15); border-radius: var(--r); color: #fff; font-family: var(--font-body); font-size: 16px; outline: none; transition: border-color .2s; width: 100%; box-sizing: border-box; }
.cta-input::placeholder { color: oklch(70% .02 240); }
.cta-input:focus { border-color: var(--teal); }
.cta-select { appearance: none; cursor: pointer; }
.cta-select option { background: var(--navy); color: #fff; }
.cta-input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.5); cursor: pointer; }
.contact-input { background: var(--white) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
.contact-input::placeholder { color: var(--text-light) !important; }
.contact-input:focus { border-color: var(--teal) !important; }
.contact-input.cta-select option { background: var(--white); color: var(--text); }
.contact-input[type="date"]::-webkit-calendar-picker-indicator { filter: none !important; opacity: .5; cursor: pointer; }
.btn-cta { padding: 15px 26px; background: var(--teal); color: #fff; font-family: var(--font-body); font-size: 15px; font-weight: 500; border: none; border-radius: var(--r); cursor: pointer; white-space: nowrap; transition: opacity .2s, transform .15s; }
.btn-cta:hover { opacity: .88; transform: translateY(-2px); }
.form-note { font-size: 12px; color: oklch(55% .02 240); margin-bottom: 52px; }
.form-success { display: none; text-align: center; padding: 18px; color: var(--teal); font-size: 16px; font-weight: 500; margin-bottom: 52px; }
.form-success.show { display: block; }
.cta-contacts { display: flex; justify-content: center; gap: 44px; flex-wrap: wrap; padding-top: 44px; border-top: 1px solid oklch(100% 0 0 / .1); }
.ct-item { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ct-label { font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: oklch(50% .02 240); }
.ct-val { font-size: 16px; font-weight: 500; color: #fff; }
.ct-val a { color: #fff; transition: color .2s; }
.ct-val a:hover { color: var(--teal); }

/* FOOTER */
footer { background: oklch(20% .055 240); padding: 36px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; }
.footer-logo { font-size: 15px; font-weight: 600; color: oklch(68% .03 240); letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.footer-logo img { height: 22px; width: auto; opacity: .7; filter: brightness(0) invert(1); }
.footer-copy { font-size: 12px; color: oklch(48% .02 240); }
.footer-links { display: flex; gap: 24px; list-style: none; }
.footer-links a { font-size: 14px; color: oklch(52% .025 240); transition: color .2s; }
.footer-links a:hover { color: var(--teal); }

/* PORTFOLIO PAGE */
.portfolio-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.pf-btn { padding: 8px 18px; border: 1px solid var(--border); border-radius: 100px; font-size: 13px; color: var(--text-mid); background: transparent; cursor: pointer; transition: all .2s; }
.pf-btn.active, .pf-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.albums-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.album-card { border-radius: var(--rc); overflow: hidden; border: 1px solid var(--border); transition: transform .25s, box-shadow .25s; }
.album-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px oklch(26% .065 240 / .08); }
.album-cover { aspect-ratio: 4/3; background: var(--sand-deep); position: relative; overflow: hidden; }
.album-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.album-card:hover .album-cover img { transform: scale(1.05); }
.album-overlay { position: absolute; inset: 0; background: linear-gradient(to top, oklch(20% .04 240 / .72) 0%, transparent 55%); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 20px 16px; gap: 3px; opacity: 0; transition: opacity .3s ease; }
.album-card:hover .album-overlay { opacity: 1; }
.album-overlay span { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.album-cnt { font-size: 12px !important; font-weight: 400 !important; opacity: .82; }
.album-body { padding: 18px 20px; }
.album-service { font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; }
.album-title { font-size: 16px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; }

/* BLOG PAGE */
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; }
.post-card { border-radius: var(--rc); border: 1px solid var(--border); overflow: hidden; transition: transform .25s; }
.post-card:hover { transform: translateY(-3px); }
.post-body { padding: 22px; }
.post-date { font-size: 11px; color: var(--text-light); margin-bottom: 10px; }
.post-title { font-size: 17px; font-weight: 600; color: var(--navy); line-height: 1.3; letter-spacing: -.02em; margin-bottom: 10px; }
.post-excerpt { font-size: 15px; font-weight: 300; color: var(--text-mid); line-height: 1.65; }
.post-content { font-size: 16px; font-weight: 300; color: var(--text); line-height: 1.85; max-width: 720px; margin: 0 auto; }
.post-content h2 { font-size: 26px; font-weight: 600; color: var(--navy); letter-spacing: -.03em; margin: 48px 0 18px; }
.post-content h3 { font-size: 20px; font-weight: 600; color: var(--navy); margin: 32px 0 14px; }
.post-content p { margin-bottom: 20px; }
.post-content ul, .post-content ol { padding-left: 24px; margin-bottom: 20px; }
.post-content li { margin-bottom: 8px; }
.post-content strong { color: var(--navy); font-weight: 600; }

/* FLOATING CALL BUTTON */
.float-call {
  position: fixed; bottom: 24px; right: 24px; z-index: 300;
  bottom: max(24px, env(safe-area-inset-bottom, 24px));
  display: flex; align-items: center; gap: 10px;
  background: var(--teal); color: #fff;
  padding: 13px 20px; border-radius: 100px;
  font-size: 14px; font-weight: 500; letter-spacing: -.01em;
  box-shadow: 0 4px 20px oklch(62% .13 28 / .4);
  transform: translateY(16px) scale(.94); opacity: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease, box-shadow .2s;
  pointer-events: none; text-decoration: none;
}
.float-call.shown { transform: none; opacity: 1; pointer-events: auto; }
.float-call:hover { box-shadow: 0 6px 28px oklch(62% .13 28 / .55); transform: translateY(-2px) !important; }
.float-call svg { flex-shrink: 0; }
@media (max-width: 600px) {
  .float-call { padding: 18px; bottom: max(20px, env(safe-area-inset-bottom, 20px)); right: 16px; box-shadow: 0 6px 24px oklch(62% .13 28 / .55); }
  .float-call svg { width: 22px; height: 22px; }
  .float-call-text { display: none; }
}

/* MASONRY GALLERY */
.masonry { columns: 3; column-gap: 12px; }
.masonry-item {
  break-inside: avoid; margin-bottom: 12px;
  border-radius: var(--rc); overflow: hidden;
  cursor: zoom-in; position: relative;
}
a.masonry-item { display: block; text-decoration: none; color: inherit; }
.masonry-item img { width: 100%; display: block; transition: transform .4s ease; }
.masonry-item::after {
  content: ''; position: absolute; inset: 0;
  background: oklch(26% .065 240 / 0);
  transition: background .3s;
  pointer-events: none;
}
.masonry-item:hover img { transform: scale(1.04); }
.masonry-item:hover::after { background: oklch(26% .065 240 / .18); }


/* BOOKING MODAL */
.modal-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: oklch(10% .02 240 / .72);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-box {
  background: var(--white); border-radius: var(--rc);
  padding: 36px 32px 32px; width: 100%; max-width: 480px; position: relative;
  transform: translateY(20px) scale(.97);
  transition: transform .3s cubic-bezier(.34,1.3,.64,1);
  max-height: 90vh; overflow-y: auto;
}
.modal-overlay.open .modal-box { transform: none; }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--sand); cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text-mid); transition: background .2s;
}
.modal-close:hover { background: var(--sand-deep); }
.modal-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; }
.modal-title { font-size: clamp(22px, 3vw, 28px); font-weight: 600; letter-spacing: -.03em; color: var(--navy); margin-bottom: 8px; }
.modal-sub { font-size: 14px; font-weight: 300; color: var(--text-mid); line-height: 1.65; margin-bottom: 24px; }
.modal-form { display: flex; flex-direction: column; gap: 10px; }
.modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-field { display: flex; flex-direction: column; gap: 5px; }
.modal-label { font-size: 12px; font-weight: 500; color: var(--text-mid); letter-spacing: .02em; }
.modal-req { color: var(--teal); }
.modal-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; background: var(--sand); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text); font-family: var(--font-body); font-size: 16px;
  outline: none; transition: border-color .2s;
}
.modal-input::placeholder { color: var(--text-light); }
.modal-input:focus { border-color: var(--teal); background: var(--white); }
.modal-select { appearance: none; cursor: pointer; }
.modal-input[type="date"]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
textarea.modal-input { resize: vertical; }
.modal-submit {
  padding: 14px 24px; background: var(--teal); color: #fff;
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  border: none; border-radius: var(--r); cursor: pointer;
  transition: opacity .2s, transform .15s; margin-top: 4px;
}
.modal-submit:hover { opacity: .88; transform: translateY(-1px); }
.modal-success { display: none; text-align: center; padding: 14px; color: var(--teal); font-size: 15px; font-weight: 500; }
.modal-success.show { display: block; }
@media (max-width: 500px) {
  .modal-box { padding: 28px 18px 24px; }
  .modal-row { grid-template-columns: 1fr; }
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  .wrap { padding: 0 24px; }
  /* Вариант 1: фото сверху на всю ширину, текст снизу */
  #hero { grid-template-columns: 1fr; min-height: auto; padding-left: 0; }
  .hero-right {
    display: block; order: -1;
    height: 78vw; max-height: 520px;
    will-change: auto; transform: none !important;
  }
  .hero-right::after { background: linear-gradient(to bottom, transparent 55%, var(--sand) 100%); }
  .hero-stat-bar { display: none; }
  .hero-left { padding: 12px 24px 60px; }
  .about-inner { grid-template-columns: 1fr; gap: 32px; }
  .about-photo-wrap { display: block; aspect-ratio: 4/3; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .srv-card-wide { grid-column: span 1; }
  .cases-grid { grid-template-columns: 1fr 1fr; }
  .ai-inner { grid-template-columns: 1fr; gap: 48px; }
  .reviews-grid { grid-template-columns: 1fr 1fr; }
  .faq-layout { grid-template-columns: 1fr; gap: 36px; }
  .geo-inner { grid-template-columns: 1fr; gap: 36px; }
  .geo-map { min-height: 360px; aspect-ratio: 16 / 10; }
  .albums-grid, .posts-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .masonry { columns: 2; }
}
@media (max-width: 500px) {
  .masonry { columns: 1; }
}
@media (max-width: 600px) {
  section, #about, #geo { padding: 64px 0; }
  .wrap { padding: 0 18px; }
  #hero { padding-left: 18px; }
  .hero-left { padding-left: 0; }
  .services-grid, .cases-grid, .reviews-grid, .albums-grid, .posts-grid { grid-template-columns: 1fr; }
  .cta-form { max-width: 100%; }
  .cta-row { grid-template-columns: 1fr; }
  .geo-map { min-height: 300px; aspect-ratio: 1 / 1; }
  .geo-city { align-items: flex-start; line-height: 1.45; }
  .geo-city::before { margin-top: 7px; }
  .footer-inner { flex-direction: column; gap: 14px; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .cta-contacts { flex-direction: column; align-items: center; gap: 20px; }
  .float-call { bottom: max(20px, env(safe-area-inset-bottom, 20px)); right: 16px; }
}