/* ============================================================
   Creative Landscaping — Shared Design System
   ============================================================ */

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--cl-ink);
  background: var(--cl-cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font: inherit; }

/* === TOKENS === */
:root {
  --cl-green:      #1F6B3A;
  --cl-green-deep: #154A28;
  --cl-green-soft: #2E8B4F;
  --cl-gold:       #D4A017;
  --cl-gold-warm:  #B8860B;
  --cl-cream:      #F8F4EB;
  --cl-cream-2:    #F1EADC;
  --cl-paper:      #FCFAF4;
  --cl-ink:        #1A1F1A;
  --cl-ink-soft:   #4A5048;
  --cl-ink-mute:   #6B7068;
  --cl-line:       #E0DBC8;
  --cl-line-warm:  #D6CCB0;
}

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

/* === TYPOGRAPHY === */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cl-green); margin-bottom: 20px;
}
.eyebrow-line { width: 32px; height: 2px; background: var(--cl-gold); flex-shrink: 0; }

.section-eyebrow {
  font-family: 'Oswald', sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cl-green); margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
}
.section-eyebrow::before { content: ''; width: 32px; height: 2px; background: var(--cl-gold); }

.section-title {
  font-family: 'Lora', serif; font-weight: 500;
  font-size: clamp(32px, 4vw, 52px); color: var(--cl-ink);
  line-height: 1.05; letter-spacing: -0.018em; text-wrap: balance;
}
.section-title em { font-style: italic; color: var(--cl-green); }

.section-sub {
  font-size: 17px; line-height: 1.65; color: var(--cl-ink-soft); max-width: 560px;
}

.section-header { margin-bottom: 48px; }
.section-header-center { text-align: center; }
.section-header-center .section-eyebrow { justify-content: center; }
.section-header-center .section-eyebrow::before { display: none; }
.section-header-center .section-sub { margin: 12px auto 0; }

/* === SECTIONS === */
.section { padding: 88px 0; }
.section-alt { background: var(--cl-cream-2); }
.section-dark { background: var(--cl-green-deep); color: var(--cl-cream); }

/* === ANNOUNCE BAR === */
.announce {
  background: var(--cl-green-deep); color: var(--cl-cream);
  text-align: center; padding: 9px 20px;
  font-size: 13px; letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.announce strong { color: #ffffff; font-weight: 600; }
.announce a { text-decoration: underline; text-underline-offset: 2px; color: #ffffff; }

/* === NAV === */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(248, 244, 235, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cl-line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 24px; }

.brand { display: flex; align-items: center; }
.brand-logo { height: 44px; width: auto; display: block; flex-shrink: 0; }

.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-link {
  font-size: 14px; font-weight: 500; color: var(--cl-ink-soft);
  transition: color .15s; white-space: nowrap;
}
.nav-link:hover { color: var(--cl-green); }

.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-phone {
  font-weight: 600; font-size: 14px; color: var(--cl-green);
  display: flex; align-items: center; gap: 7px;
}

/* === HAMBURGER MENU === */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px; background: none; border: none;
  cursor: pointer; padding: 4px; border-radius: 4px;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--cl-ink); border-radius: 2px;
  transition: transform 0.22s, opacity 0.22s;
  transform-origin: center;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  position: fixed; top: 77px; left: 0; right: 0; z-index: 99;
  background: rgba(248,244,235,0.98); backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--cl-green);
  padding: 20px 24px 28px;
  flex-direction: column; gap: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.nav-mobile.open { display: flex; }
.nav-mobile-link {
  font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--cl-ink); padding: 12px 0;
  border-bottom: 1px solid var(--cl-line);
  transition: color 0.15s, padding-left 0.15s;
}
.nav-mobile-link:hover { color: var(--cl-green); padding-left: 6px; }
.nav-mobile-link:last-child { border-bottom: none; }
.nav-mobile-cta {
  margin-top: 16px;
  display: flex; gap: 12px; flex-wrap: wrap;
}

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 6px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap; border: 2px solid transparent;
}
.btn-primary { background: var(--cl-green); color: white; }
.btn-primary:hover { background: var(--cl-green-deep); }
.btn-outline { background: transparent; color: var(--cl-green); border-color: var(--cl-green); }
.btn-outline:hover { background: var(--cl-green); color: white; }
.btn-gold { background: var(--cl-gold); color: var(--cl-ink); border-color: var(--cl-gold); }
.btn-gold:hover { background: var(--cl-gold-warm); border-color: var(--cl-gold-warm); }
.btn-white { background: white; color: var(--cl-green); }
.btn-white:hover { background: var(--cl-cream); }
.btn-lg { padding: 17px 32px; font-size: 16px; }

/* === TRUST BAR === */
.trust-bar { background: white; border-bottom: 1px solid var(--cl-line); padding: 18px 0; }
.trust-items { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.trust-label { font-size: 14px; font-weight: 600; color: var(--cl-ink-soft); }
.trust-num {
  font-family: 'Lora', serif; font-size: 18px; font-weight: 600;
  color: var(--cl-green); margin-right: 2px;
}
.trust-star { color: #F59E0B; font-size: 15px; letter-spacing: 1px; }
.trust-divider { width: 1px; height: 32px; background: var(--cl-line); }

/* === SERVICE CARDS === */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card {
  background: var(--cl-paper); border: 1px solid var(--cl-line);
  border-radius: 8px; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  display: flex; flex-direction: column;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -12px rgba(31, 107, 58, 0.25);
}
.service-img { aspect-ratio: 4 / 3; position: relative; overflow: hidden; }
.service-img-half { position: absolute; inset: 0; }
.service-img-before { clip-path: polygon(0 0, 52% 0, 48% 100%, 0 100%); }
.service-img-after  { clip-path: polygon(52% 0, 100% 0, 100% 100%, 48% 100%); }
.service-img-divider {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(102deg,
    transparent calc(50% - 1px),
    rgba(248,244,235,0.7) calc(50% - 0.5px),
    rgba(248,244,235,0.7) calc(50% + 0.5px),
    transparent calc(50% + 1px));
}
.service-img-tags {
  position: absolute; inset: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 12px; pointer-events: none;
}
.service-img-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 3px; backdrop-filter: blur(6px);
}
.sit-before { background: rgba(20,20,20,0.55); color: #e8e6dc; }
.sit-after  { background: rgba(31,107,58,0.85); color: var(--cl-gold); }

.service-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.service-icon { width: 32px; height: 32px; color: var(--cl-green); }
.service-name {
  font-family: 'Lora', serif; font-weight: 600; font-size: 20px;
  color: var(--cl-ink); line-height: 1.2; letter-spacing: -0.005em;
}
.service-desc { font-size: 14.5px; line-height: 1.6; color: var(--cl-ink-soft); flex: 1; }
.service-link {
  margin-top: 6px;
  font-family: 'Oswald', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cl-green); display: inline-flex; align-items: center; gap: 6px;
}
.service-link svg { transition: transform .15s; }
.service-card:hover .service-link svg { transform: translateX(4px); }

/* Service image gradients */
.si-patio .service-img-before { background: linear-gradient(180deg, #a5a8a3 0%, #8a857a 30%, #6e6149 35%, #5a5040 100%); }
.si-patio .service-img-after  { background: linear-gradient(180deg, #b6cfd8 0%, #c8d8d0 30%, #c4a980 35%, #a08660 65%, #1F6B3A 70%, #154A28 100%); }
.si-walls .service-img-before { background: linear-gradient(180deg, #a5a8a3 0%, #8a857a 30%, #6b6149 33%, #5a5040 100%); }
.si-walls .service-img-after  { background: linear-gradient(180deg, #b6cfd8 0%, #c8d8d0 28%, #6b5340 32%, #8a6e4f 55%, #1F6B3A 60%, #154A28 100%); }
.si-design .service-img-before{ background: radial-gradient(ellipse 40% 15% at 50% 65%, #6e6044 0%, transparent 70%), linear-gradient(180deg, #a5a8a3 0%, #8a857a 32%, #5a5040 36%, #4a4234 100%); }
.si-design .service-img-after { background: linear-gradient(180deg, #b6cfd8 0%, #c8d8d0 28%, #5a4030 32%, #5a4030 38%, #1F6B3A 38%, #154A28 100%); }
.si-drain .service-img-before { background: radial-gradient(ellipse 50% 25% at 35% 80%, #4a6a72 0%, transparent 60%), linear-gradient(180deg, #a5a8a3 0%, #8a857a 30%, #5a5042 35%, #4a4232 100%); }
.si-drain .service-img-after  { background: linear-gradient(180deg, #b6cfd8 0%, #c8d8d0 30%, #2E8B4F 35%, #1F6B3A 70%, #154A28 100%); }
.si-tree .service-img-before  { background: radial-gradient(ellipse 30% 20% at 30% 75%, #6e6044 0%, transparent 70%), linear-gradient(180deg, #aaa9a3 0%, #8a857a 35%, #5a5040 38%, #4a4234 100%); }
.si-tree .service-img-after   { background: radial-gradient(ellipse 30% 35% at 70% 35%, #2E8B4F 0%, transparent 70%), linear-gradient(180deg, #b6cfd8 0%, #c8d8d0 35%, #1F6B3A 38%, #154A28 100%); }
.si-maint .service-img-before { background: radial-gradient(ellipse 40% 15% at 30% 70%, #6e6044 0%, transparent 70%), linear-gradient(180deg, #b8b8b0 0%, #98948a 30%, #6b6149 35%, #5a5040 100%); }
.si-maint .service-img-after  { background: linear-gradient(180deg, #b6cfd8 0%, #c8d8d0 30%, #2E8B4F 35%, #1F6B3A 65%, #154A28 100%); }

/* === PROCESS STEPS === */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.step { position: relative; }
.step-num {
  width: 52px; height: 52px;
  background: var(--cl-green); color: white;
  font-family: 'Lora', serif; font-size: 22px; font-weight: 600;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.step-connector {
  display: none;
}
.step h3 {
  font-family: 'Lora', serif; font-weight: 600; font-size: 19px;
  color: var(--cl-ink); margin-bottom: 10px; line-height: 1.25;
}
.step p { font-size: 15px; line-height: 1.65; color: var(--cl-ink-soft); }

/* === REVIEW CARDS === */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card {
  background: white; border: 1px solid var(--cl-line);
  border-radius: 10px; padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.review-stars { color: #F59E0B; font-size: 16px; letter-spacing: 2px; }
.review-text {
  font-family: 'Lora', serif; font-style: italic;
  font-size: 15.5px; line-height: 1.7; color: var(--cl-ink); flex: 1;
}
.review-meta { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 700;
  color: white; flex-shrink: 0;
}
.review-meta-text { display: flex; flex-direction: column; gap: 2px; }
.review-author {
  font-size: 14px; font-weight: 700; color: var(--cl-ink);
  display: flex; align-items: center; gap: 8px;
}
.review-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Oswald', sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cl-ink-mute); border: 1px solid var(--cl-line);
  padding: 2px 6px; border-radius: 3px;
}
.review-project { font-size: 13px; color: var(--cl-ink-mute); }

/* === CHECKLIST (service pages) === */
.checklist { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--cl-line); }
.checklist-item {
  padding: 32px 0; border-bottom: 1px solid var(--cl-line);
  display: grid; grid-template-columns: 52px 1fr; gap: 0; align-items: start;
}
.checklist-item:nth-child(odd)  { padding-right: 48px; border-right: 1px solid var(--cl-line); }
.checklist-item:nth-child(even) { padding-left: 48px; }
.checklist-num {
  font-family: 'Lora', serif; font-style: italic;
  font-weight: 500; font-size: 28px; color: var(--cl-gold-warm); line-height: 1;
}
.checklist-content h3 {
  font-family: 'Lora', serif; font-weight: 600; font-size: 21px;
  color: var(--cl-ink); line-height: 1.2; margin-bottom: 10px; letter-spacing: -0.005em;
}
.checklist-content p { font-size: 15px; line-height: 1.65; color: var(--cl-ink-soft); }

/* === FAQ === */
.faq-list { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.faq-item { background: white; border: 1px solid var(--cl-line); border-radius: 8px; padding: 24px 28px; }
.faq-q { font-family: 'Lora', serif; font-weight: 600; font-size: 18px; color: var(--cl-ink); margin-bottom: 10px; line-height: 1.3; }
.faq-a { font-size: 15px; line-height: 1.7; color: var(--cl-ink-soft); }

/* === CTA BANNER === */
.cta-banner {
  background: linear-gradient(135deg, var(--cl-green-deep) 0%, var(--cl-green) 100%);
  padding: 88px 0; text-align: center; color: white;
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 80% 20%, rgba(46,139,79,0.4) 0%, transparent 60%);
  pointer-events: none;
}
.cta-banner-inner { position: relative; max-width: 680px; margin: 0 auto; }
.cta-banner h2 {
  font-family: 'Lora', serif; font-weight: 500;
  font-size: clamp(32px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.018em;
  margin-bottom: 18px; text-wrap: balance;
}
.cta-banner h2 em { font-style: italic; color: var(--cl-gold); }
.cta-banner p { font-size: 18px; line-height: 1.65; color: rgba(248,244,235,0.82); margin-bottom: 36px; }
.cta-banner-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* === FORM CARD === */
.form-card {
  background: var(--cl-paper); border: 1px solid var(--cl-line-warm);
  border-radius: 10px; padding: 36px; color: var(--cl-ink);
  box-shadow: 0 24px 64px -20px rgba(0,0,0,0.4), 0 0 0 1px rgba(212,160,23,0.18);
  position: relative;
}
.form-card::before, .form-card::after {
  content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--cl-gold);
}
.form-card::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.form-card::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.form-eyebrow { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cl-green); margin-bottom: 8px; }
.form-title { font-family: 'Lora', serif; font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--cl-ink); margin-bottom: 26px; }
.form-title em { font-style: italic; color: var(--cl-green); }

.form-grid { display: grid; gap: 14px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 500;
  color: var(--cl-ink-soft); letter-spacing: 0.10em; text-transform: uppercase;
}
.field-label .opt { text-transform: none; font-weight: 400; opacity: 0.7; letter-spacing: 0.02em; font-family: 'Inter', sans-serif; }
.field-input, .field-textarea, .field-select {
  background: var(--cl-cream); border: 1px solid var(--cl-line);
  border-radius: 5px; padding: 12px 14px;
  font-size: 15px; color: var(--cl-ink);
  transition: border-color .15s, background .15s;
  -webkit-appearance: none; appearance: none;
}
.field-input::placeholder, .field-textarea::placeholder { color: var(--cl-ink-mute); }
.field-input:focus, .field-textarea:focus, .field-select:focus {
  outline: none; border-color: var(--cl-green); background: white;
  box-shadow: 0 0 0 3px rgba(31,107,58,0.12);
}
.field-textarea { resize: vertical; min-height: 80px; }
.field-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7068' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px;
}
.submit-btn {
  background: var(--cl-green); color: white; padding: 17px 22px; border-radius: 6px;
  font-size: 16px; font-weight: 600; letter-spacing: 0.02em;
  transition: background .15s, transform .15s; margin-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
}
.submit-btn:hover { background: var(--cl-green-deep); }
.submit-btn:active { transform: translateY(1px); }
.form-fineprint { margin-top: 14px; font-size: 12px; color: var(--cl-ink-mute); text-align: center; line-height: 1.5; }
.form-fineprint strong { color: var(--cl-green); }

/* === FOOTER === */
.footer { background: var(--cl-cream-2); border-top: 1px solid var(--cl-line); padding: 56px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.footer-about { font-size: 14px; color: var(--cl-ink-soft); line-height: 1.65; max-width: 340px; margin-top: 16px; }
.footer-col h3 {
  font-family: 'Oswald', sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cl-green); margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: grid; gap: 8px; }
.footer-col li { font-size: 14px; color: var(--cl-ink-soft); }
.footer-col a { transition: color .15s; }
.footer-col a:hover { color: var(--cl-green); }
.footer-bottom {
  border-top: 1px solid var(--cl-line); padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--cl-ink-mute); flex-wrap: wrap; gap: 12px;
}
.footer-bottom .rooted { color: var(--cl-green); font-weight: 500; }

/* === MOBILE CTA (sticky) === */
.mobile-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--cl-cream); padding: 12px 16px; z-index: 200;
  border-top: 1px solid var(--cl-line);
}
.mobile-cta a {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: white; font-weight: 600; font-size: 15px;
  padding: 13px; background: var(--cl-green); border-radius: 6px;
}

/* === VISUALLY HIDDEN (honeypot) === */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* === DIVIDER GLYPH === */
.divider-glyph {
  display: flex; align-items: center; justify-content: center; gap: 18px; padding: 64px 0 32px;
}
.divider-glyph::before, .divider-glyph::after {
  content: ''; height: 1px; flex: 1; max-width: 120px; background: var(--cl-line-warm);
}
.divider-glyph svg { color: var(--cl-gold); }

/* === PULLQUOTE === */
.pullquote {
  font-family: 'Lora', serif; font-style: italic; font-weight: 500;
  font-size: 21px; line-height: 1.45; color: var(--cl-green);
  border-left: 3px solid var(--cl-gold); padding: 4px 0 4px 24px;
  margin: 28px 0; text-wrap: balance;
}

/* === ABOUT PORTRAIT === */
.about-portrait {
  position: relative; border-radius: 8px; overflow: hidden;
  background: #2a3a25;
  box-shadow: 0 30px 80px -20px rgba(31,107,58,0.35), 0 0 0 1px var(--cl-line-warm);
}
.about-portrait-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
.about-portrait-overlay {
  position: absolute; bottom: 22px; left: 22px; right: 22px; z-index: 2;
  background: rgba(15,30,18,0.85); backdrop-filter: blur(8px);
  border-left: 3px solid var(--cl-gold); padding: 14px 18px; color: var(--cl-cream);
}
.about-portrait-name { font-family: 'Lora', serif; font-style: italic; font-size: 17px; line-height: 1.2; margin-bottom: 4px; }
.about-portrait-title { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cl-gold); }
.about-portrait-est { position: absolute; top: 22px; right: 22px; font-family: 'Lora', serif; font-style: italic; text-align: right; color: var(--cl-cream); }
.about-portrait-est-num { font-size: 36px; line-height: 1; color: var(--cl-gold); font-weight: 500; }
.about-portrait-est-label { font-family: 'Oswald', sans-serif; font-style: normal; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 4px; }

/* === STAT ROW === */
.stat-row { display: grid; border-top: 1px solid var(--cl-line); padding-top: 28px; margin-top: 28px; }
.stat-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.stat-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.stat { border-right: 1px solid var(--cl-line); padding: 0 28px 0 0; }
.stat:not(:first-child) { padding-left: 28px; }
.stat:last-child { border-right: 0; padding-right: 0; }
.stat-num {
  font-family: 'Lora', serif; font-weight: 600; font-size: 28px;
  color: var(--cl-green); line-height: 1; margin-bottom: 6px;
}
.stat-label {
  font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cl-ink-soft);
}

/* === AREAS GRID === */
.areas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.area-pill {
  display: flex; align-items: center; gap: 10px;
  background: white; border: 1px solid var(--cl-line); border-radius: 8px;
  padding: 14px 18px; font-size: 15px; font-weight: 500; color: var(--cl-ink-soft);
  transition: border-color .15s, color .15s;
}
.area-pill:hover { border-color: var(--cl-green); color: var(--cl-green); }
.area-pin { color: var(--cl-gold); font-size: 18px; }
.area-pill.primary { border-color: var(--cl-green); }
.area-pill.primary .area-name { color: var(--cl-green); font-weight: 600; }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 920px) {
  .wrap { padding: 0 20px; }
  .section { padding: 64px 0; }
  .service-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .checklist { grid-template-columns: 1fr; }
  .checklist-item:nth-child(odd) { padding-right: 0; border-right: 0; }
  .checklist-item:nth-child(even) { padding-left: 0; }
  .areas-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-phone { display: none; }
  .mobile-cta { display: block; }
  body { padding-bottom: 80px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .trust-divider { display: none; }
}
@media (max-width: 640px) {
  .steps-grid { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }
  .trust-items { gap: 16px; }
  .cta-banner-btns { flex-direction: column; align-items: center; }
}

/* === SCROLL ANIMATIONS === */
@media (prefers-reduced-motion: no-preference) {
  .anim {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .anim.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Stagger delays — grids */
  .service-grid .service-card:nth-child(2),
  .reviews-grid .review-card:nth-child(2),
  .steps-grid .step:nth-child(2),
  .differentiators .diff-card:nth-child(2),
  .values-grid .value-card:nth-child(2),
  .team-grid .team-card:nth-child(2) { transition-delay: 0.09s; }

  .service-grid .service-card:nth-child(3),
  .reviews-grid .review-card:nth-child(3),
  .steps-grid .step:nth-child(3),
  .differentiators .diff-card:nth-child(3),
  .values-grid .value-card:nth-child(3),
  .team-grid .team-card:nth-child(3) { transition-delay: 0.18s; }

  .service-grid .service-card:nth-child(4) { transition-delay: 0.09s; }
  .service-grid .service-card:nth-child(5) { transition-delay: 0.18s; }
  .service-grid .service-card:nth-child(6) { transition-delay: 0.27s; }

  .steps-grid .step:nth-child(4) { transition-delay: 0.27s; }

  .checklist-item:nth-child(even) { transition-delay: 0.08s; }

  .faq-item:nth-child(2) { transition-delay: 0.05s; }
  .faq-item:nth-child(3) { transition-delay: 0.10s; }
  .faq-item:nth-child(4) { transition-delay: 0.15s; }
  .faq-item:nth-child(5) { transition-delay: 0.20s; }

  .area-pill:nth-child(2) { transition-delay: 0.04s; }
  .area-pill:nth-child(3) { transition-delay: 0.08s; }
  .area-pill:nth-child(4) { transition-delay: 0.12s; }
  .area-pill:nth-child(5) { transition-delay: 0.16s; }
  .area-pill:nth-child(6) { transition-delay: 0.20s; }
  .area-pill:nth-child(7) { transition-delay: 0.24s; }
  .area-pill:nth-child(8) { transition-delay: 0.28s; }
  .area-pill:nth-child(9) { transition-delay: 0.32s; }
}

/* === REAL PHOTO HELPERS === */
.service-photo,
.hero-photo,
.team-photo,
.founder-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-photo    { object-position: top center; }
.founder-photo { object-position: top center; }

/* === SERVICE PAGE PROJECT GALLERY === */
.svc-gallery-section {
  padding: 72px 0;
  background: white;
  border-top: 1px solid var(--cl-line);
}
.svc-gallery-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 28px; flex-wrap: wrap; gap: 12px;
}
.svc-gallery-header h2 {
  font-family: 'Lora', serif; font-weight: 500;
  font-size: clamp(22px, 3vw, 32px); line-height: 1.2; letter-spacing: -0.016em;
  color: var(--cl-ink);
}
.svc-gallery-header h2 em { font-style: italic; color: var(--cl-green); }
.svc-gallery-link {
  font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cl-green); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.svc-gallery-link:hover { color: var(--cl-gold); }
.svc-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.svc-gallery-item {
  border-radius: 8px; overflow: hidden;
  aspect-ratio: 4/3; position: relative;
  background: var(--cl-cream);
  border: 1px solid var(--cl-line);
}
.svc-gallery-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.35s;
}
.svc-gallery-item:hover img { transform: scale(1.04); }
.svc-gallery-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 2px dashed var(--cl-line);
  border-radius: 8px;
  color: var(--cl-ink-mute);
}
.svc-gallery-placeholder svg { opacity: 0.35; }
.svc-gallery-placeholder span {
  font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.5;
}
@media (max-width: 640px) {
  .svc-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* === FOOTER AI LINK === */
.footer-ai-link {
  font-family: 'Oswald', sans-serif; font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--cl-ink-mute);
  transition: opacity 0.15s, color 0.15s;
}
.footer-ai-link:hover { opacity: 1; color: var(--cl-green); }