/* ==========================================================================
   Service pages — field-guide infographic
   ========================================================================== */
.guide{
  --g-risk:#d9573f; --g-warn:#e2a23a; --g-safe:#3f9e6c; --g-ink:#0c1712; --g-line:rgba(18,36,27,.1);
  background: linear-gradient(180deg, #f7f3ea 0%, #f1f3ec 100%);
  padding: clamp(64px, 9vw, 112px) 0;
}
.guide-head{ max-width: 720px; margin-bottom: 44px; }
.guide-eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 14px;
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--green-600);
}
.guide-eyebrow::before{ content:""; width:26px; height:2px; background: currentColor; opacity:.55; }
.guide-head h2{ font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing:-.035em; line-height:1.04; color: var(--g-ink); }
.guide-lede{ margin-top:16px; font-size:1.06rem; line-height:1.65; color: var(--text-secondary); max-width: 58ch; }
.guide-h3{ font-family: var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:-.01em; color: var(--g-ink); margin:0 0 16px; }
.guide-block{ margin-bottom: 44px; }
.guide-split{ display:grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items:start; margin-bottom: 44px; }
.guide-split > .guide-block{ margin-bottom:0; }
.guide-split--wide{ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

.guide-card{
  background:#fff; border:1px solid var(--g-line); border-radius:16px; padding:18px;
  box-shadow: 0 14px 34px -26px rgba(12,23,18,.4);
  transition: box-shadow .3s, border-color .3s; will-change: transform;
}
.guide-card:hover{ border-color: rgba(63,158,108,.35); box-shadow: 0 22px 44px -24px rgba(12,23,18,.4); }

/* species */
.guide-species{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap:14px; }
.guide-species img{ width:48px; height:48px; margin-bottom:12px; opacity:.85; }
.guide-species strong{ display:block; font-size:1rem; color: var(--g-ink); }
.guide-species em{ display:block; font-size:.84rem; color: var(--green-600); margin:2px 0 8px; }
.guide-species span{ display:block; font-size:.86rem; line-height:1.5; color: var(--text-secondary); }
/* species photo cards */
.guide-card--photo{ padding:0; overflow:hidden; display:flex; flex-direction:column; transition: transform .35s cubic-bezier(.22,.8,.2,1), box-shadow .3s, border-color .3s; }
.guide-card--photo:hover{ transform: translateY(-4px); }
.guide-photo{ position:relative; margin:0; aspect-ratio: 4/3; max-height: 270px; overflow:hidden; background:#1c2620; }
@media (max-width: 640px){
  .guide-species:has(.guide-card--photo){ display:flex; overflow-x:auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; gap:12px; margin: 0 -16px; padding: 4px 16px 12px; scrollbar-width:none; }
  .guide-species:has(.guide-card--photo)::-webkit-scrollbar{ display:none; }
  .guide-species .guide-card--photo{ flex: 0 0 78%; scroll-snap-align: start; }
}
.guide-species .guide-photo img{ width:100%; height:100%; margin:0; opacity:1; object-fit:cover; display:block; transition: transform .8s cubic-bezier(.22,.8,.2,1); }
.guide-card--photo:hover .guide-photo img{ transform: scale(1.06); }
.guide-photo figcaption{ position:absolute; left:0; right:0; bottom:0; padding: 18px 10px 6px; font-size:.64rem; line-height:1.3; color: rgba(255,255,255,.82); background: linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,0)); }
.guide-photo figcaption a{ color:#fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); }
.guide-card__body{ padding: 14px 16px 16px; }
.guide-species .guide-note{ display:block; margin-top:8px; font-size:.74rem; line-height:1.4; color: #8a7a5c; font-style: italic; }
@media (prefers-reduced-motion: reduce){ .guide-card--photo, .guide-species .guide-photo img{ transition:none; } }

/* signs */
.guide-signs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:12px; }
.guide-signs li{
  display:grid; grid-template-columns: 44px 1fr; column-gap:12px; align-items:start;
  background:#fff; border:1px solid var(--g-line); border-radius:14px; padding:14px;
  font-size:.84rem; line-height:1.45; color: var(--text-secondary);
}
.guide-signs strong{ color: var(--g-ink); font-size:.92rem; }
.guide-ico{
  grid-row: span 2; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background: #fbeee9; color: var(--g-risk); transition: transform .35s cubic-bezier(.22,.8,.2,1), background .3s, color .3s;
}
.guide-ico svg{ width:24px; height:24px; }
.guide-signs li:hover .guide-ico{ transform: translateY(-3px) rotate(-6deg); background: var(--g-risk); color:#fff; }

/* risks */
.guide-risk{ background: #1a2a22; color:#fff; border-radius:18px; padding:24px 24px 18px; }
.guide-risk .guide-h3{ color:#fff; }
.guide-risk ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.guide-risk li{ position:relative; padding-left:28px; font-size:.92rem; line-height:1.5; color: rgba(236,242,236,.86); }
.guide-risk li::before{ content:"!"; position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%; background: var(--g-risk); color:#fff; font-size:.72rem; font-weight:800; display:grid; place-items:center; }

/* process chevrons: risk red -> amber -> protected green */
.guide-process{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:6px; }
.guide-process li{ --c: var(--g-risk); position:relative; font-size:.82rem; line-height:1.45; color: var(--text-secondary); }
.guide-process li:nth-child(2){ --c:#dd7a3c; } .guide-process li:nth-child(3){ --c: var(--g-warn); }
.guide-process li:nth-child(4){ --c:#9db648; } .guide-process li:nth-child(5){ --c:#5caf5e; } .guide-process li:nth-child(6){ --c: var(--g-safe); }
.guide-process b{
  display:flex; align-items:center; height:52px; padding: 0 22px 0 18px; margin-bottom:12px;
  color:#fff; font-size:.9rem; background: var(--c);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}
.guide-process li:first-child b{ clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); border-radius: 10px 0 0 10px; }
.guide-process strong{ display:block; color: var(--g-ink); font-size:.96rem; margin-bottom:3px; }
.guide-process span{ display:block; padding-right:10px; }

/* methods & areas */
.guide-methods{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
.guide-methods li{ position:relative; padding-top:22px; }
.guide-methods li::before{ content:""; position:absolute; left:18px; top:0; width:36px; height:4px; border-radius:0 0 4px 4px; background: var(--g-safe); }
.guide-methods strong{ display:block; font-size:1rem; color: var(--g-ink); margin-bottom:6px; }
.guide-methods span{ display:block; font-size:.88rem; line-height:1.55; color: var(--text-secondary); }
.guide-areas, .guide-prevent, .guide-sectors{ background:#fff; border:1px solid var(--g-line); border-radius:18px; padding:22px; }
.guide-areas ul, .guide-prevent ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.guide-areas li, .guide-prevent li{ position:relative; padding-left:28px; font-size:.9rem; line-height:1.45; color: var(--text-secondary); }
.guide-areas li::before{ content:""; position:absolute; left:4px; top:4px; width:11px; height:11px; border-radius:50%; border:2px solid var(--g-warn); }
.guide-prevent li::before{ content:"\2713"; position:absolute; left:0; top:0; width:19px; height:19px; border-radius:50%; background: var(--g-safe); color:#fff; font-size:.7rem; font-weight:800; display:grid; place-items:center; }
.guide-sectors ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.guide-sectors a{
  display:inline-flex; align-items:center; min-height:40px; padding: 8px 14px; border-radius:999px;
  background: var(--green-050); border:1px solid rgba(35,70,54,.14); color: var(--green-800);
  font-size:.86rem; font-weight:600; text-decoration:none; transition: background .25s, color .25s, transform .25s;
}
.guide-sectors a:hover{ background: var(--green-700); color:#fff; transform: translateY(-2px); }

/* motion (only when allowed; see js/guide.js) */
html.g-anim [data-g-reveal]{ opacity:0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,.8,.2,1), transform .8s cubic-bezier(.22,.8,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
html.g-anim [data-g-reveal].is-in{ opacity:1; transform:none; }
html.g-anim .guide-process li{ opacity:0; transform: translateX(-14px); transition: opacity .5s, transform .6s cubic-bezier(.22,.8,.2,1); transition-delay: calc(var(--i) * 140ms); }
html.g-anim .guide-process.is-in li{ opacity:1; transform:none; }

@media (max-width: 1024px){
  .guide-process{ grid-template-columns: repeat(3, minmax(0,1fr)); row-gap:22px; }
}
@media (max-width: 767px){
  .guide-split, .guide-split--wide{ grid-template-columns: 1fr; }
  .guide-methods{ grid-template-columns:1fr; }
  .guide-process{ grid-template-columns: 1fr 1fr; }
  .guide-process b{ height:44px; }
}

/* ==========================================================================
   Service hero, section tabs, what-to-expect, videos (tools/build-service-pages.js)
   --navh is measured from the sticky header by js/guide.js
   ========================================================================== */
.svc-hero{ position:relative; background: radial-gradient(90% 120% at 100% 0%, #25503c 0%, var(--green-900) 55%); color:#fff; padding-top: 28px; }
.svc-hero__grid{ display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(28px, 5vw, 64px); align-items:center; padding-bottom: 48px; }
.svc-hero .breadcrumbs{ font-size:.82rem; color: rgba(236,242,236,.7); margin-bottom: 22px; }
.svc-hero .breadcrumbs a{ color: rgba(236,242,236,.88); }
.svc-hero .breadcrumbs span{ color: rgba(236,242,236,.7); }
.svc-hero__kicker{ display:inline-flex; align-items:center; gap:10px; margin:0 0 14px; font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#f5c24b; }
.svc-hero__kicker::before{ content:""; width:26px; height:2px; background: currentColor; opacity:.7; }
.svc-hero h1{ color:#fff; font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height:1.04; letter-spacing:-.035em; margin:0; }
.svc-hero__lede{ margin-top:16px; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height:1.6; color:#e6ede8; max-width: 58ch; }
.svc-hero__body{ margin-top:12px; font-size:.95rem; line-height:1.65; color: rgba(226,234,228,.74); max-width: 62ch; }
.svc-hero__chips{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.svc-hero__chips li{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); font-size:.82rem; font-weight:600; color:#fff; }
.svc-hero__chips svg{ width:14px; height:14px; color:#7fd6a4; flex-shrink:0; }
.svc-hero__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 28px; align-items:stretch; }
.svc-hero__book{ min-height:54px; padding: 0 22px; font-size:1rem; }
.svc-hero__wa, .svc-hero__call{ display:inline-flex; align-items:center; gap:10px; min-height:54px; padding: 0 18px 0 11px; border-radius:12px; font-weight:800; font-family: var(--font-display); text-decoration:none; line-height:1.15; transition: transform .2s ease, box-shadow .2s ease; }
.svc-hero__wa small, .svc-hero__call small{ display:block; font: 600 .68rem/1.2 var(--font-body, inherit); letter-spacing:.04em; opacity:.75; }
.svc-hero__wa{ background:#25d366; color:#06301a; }
.svc-hero__call{ background:#fff; color: var(--green-900); }
.svc-hero__wa:hover, .svc-hero__call:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0,0,0,.5); }
.svc-hero__wa svg, .svc-hero__call svg{ width:34px; height:34px; padding:8px; border-radius:9px; flex-shrink:0; }
.svc-hero__wa svg{ background:#06301a; color:#25d366; }
.svc-hero__call svg{ background: var(--green-900); color:#fff; }
.svc-hero__trust{ display:flex; flex-wrap:wrap; gap: 6px 18px; margin: 22px 0 0; padding:0; list-style:none; font-size:.8rem; color: rgba(226,234,228,.74); }
.svc-hero__trust li{ position:relative; padding-left:14px; }
.svc-hero__trust li::before{ content:""; position:absolute; left:0; top:.5em; width:6px; height:6px; border-radius:50%; background:#7fd6a4; }
.svc-hero__media{ position:relative; margin:0; border-radius: 22px; overflow:hidden; aspect-ratio: 4/5; justify-self:end; width:100%; max-width: 440px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); background:#0c1a13; }
.svc-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 1.2s cubic-bezier(.22,.8,.2,1); }
.svc-hero__media:hover img{ transform: scale(1.04); }
.svc-hero__media figcaption{ position:absolute; left:0; right:0; bottom:0; padding: 46px 18px 16px; font-size:.84rem; line-height:1.45; color:#fff; background: linear-gradient(0deg, rgba(10,22,16,.92), rgba(10,22,16,0)); }
.svc-hero__media figcaption span{ display:table; margin-bottom:6px; padding:3px 8px; border-radius:6px; background:#f5c24b; color: var(--green-900); font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }

.svc-tabs{ position: sticky; top: var(--navh, 77px); z-index: 50; background: rgba(255,255,255,.96); border-bottom:1px solid var(--border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.svc-tabs ul{ list-style:none; margin:0; padding:0; display:flex; gap: 2px; overflow-x:auto; scrollbar-width:none; }
.svc-tabs ul::-webkit-scrollbar{ display:none; }
.svc-tabs a{ display:flex; align-items:center; min-height:50px; padding: 0 14px; white-space:nowrap; font-size:.9rem; font-weight:600; color: var(--text-secondary); border-bottom: 2px solid transparent; text-decoration:none; transition: color .2s, border-color .2s; }
.svc-tabs a:hover{ color: var(--green-800); }
.svc-tabs a.is-active{ color: var(--accent); border-bottom-color: var(--accent); }
#overview, #guide, #why, #process, #prepare, #videos, #faqs, #work{ scroll-margin-top: calc(var(--navh, 77px) + 58px); }

.svc-prep{ background: var(--white); padding: clamp(56px, 8vw, 96px) 0; }
.svc-prep__head{ max-width: 680px; margin-bottom: 32px; }
.svc-prep__head h2{ font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing:-.03em; line-height:1.08; color: var(--green-900); }
.svc-prep__head p{ margin-top:12px; color: var(--text-secondary); line-height:1.6; }
.svc-prep__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.svc-prep__card{ border-radius:18px; padding: 26px; background: #fdf6ec; border:1px solid rgba(226,162,58,.28); }
.svc-prep__card--after{ background: var(--green-050); border-color: rgba(63,158,108,.28); }
.svc-prep__card h3{ display:flex; align-items:center; gap:12px; font-size:1.2rem; color: var(--green-900); margin:0 0 16px; }
.svc-prep__num{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:.9rem; background: #e2a23a; color:#fff; flex-shrink:0; }
.svc-prep__card--after .svc-prep__num{ background: #3f9e6c; }
.svc-prep__card ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.svc-prep__card li{ position:relative; padding-left:26px; line-height:1.55; color: var(--text-secondary); font-size:.95rem; }
.svc-prep__card li::before{ content:""; position:absolute; left:4px; top:.45em; width:9px; height:9px; border-radius:50%; border:2px solid #e2a23a; }
.svc-prep__card--after li::before{ border-color:#3f9e6c; background:#3f9e6c; }



@media (max-width: 1024px){
  .svc-hero__grid{ grid-template-columns: 1fr; }
  .svc-hero__media{ justify-self:start; max-width: 560px; aspect-ratio: 16/11; }
}
@media (max-width: 640px){
  .svc-hero{ padding-top: 18px; }
  .svc-prep__grid{ grid-template-columns: 1fr; }
  .svc-hero__actions > *{ flex: 1 1 100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .svc-hero__media img, .yt-lite img, .yt-lite__play{ transition:none; }
}
.svc-feature{ background: var(--green-900); color:#fff; padding: clamp(48px, 7vw, 80px) 0; border-top:1px solid rgba(255,255,255,.08); }
.svc-feature__grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(24px, 5vw, 56px); align-items:center; }
.svc-feature .guide-eyebrow{ color:#f5c24b; }
.svc-feature h2{ color:#fff; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing:-.03em; line-height:1.1; }
.svc-feature p{ margin-top:14px; color: rgba(226,234,228,.78); line-height:1.65; max-width:58ch; }
.svc-feature img{ width:100%; height:auto; border-radius:14px; border:1px solid rgba(255,255,255,.18); background:#fff; }
@media (max-width: 860px){ .svc-feature__grid{ grid-template-columns: 1fr; } }