/* page.css: /ai-implementation, rewritten 2026-11-10 (round 2: an implementation page; hero, triple guarantee, reviews, book, case studies).
   One system, taken from the homepage tokens (src/kit/tokens.css): section padding --sec-pad (128px) on laptops,
   headings --h2, the big number --stat. Type sizes: 12 mono, 14, 16, 20, h2, h1, stat. Spacing 4 8 12 16 24 32 48 64 96 128.
   No borders, no hr, no hairlines: space does the separating. */
.pg-ai-implementation{
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --w:1120px; --r:16px; --r-lg:20px; --c1:#171515;
  --pad:var(--sec-pad,128px);
  background:var(--bg);color:var(--fg-body);font:400 16px/1.55 var(--font-sans);
}
@media (min-width:810px){.pg-ai-implementation{--edge:48px;}}
@media (max-width:767px){.pg-ai-implementation{--pad:var(--s8);--r:14px;--r-lg:16px;}}

/* ---------- shared */
.pg-ai-implementation .pgc-wrap{max-width:var(--w);margin:0 auto;}
.pg-ai-implementation section{padding:var(--pad) var(--edge);scroll-margin-top:var(--nav-clear);}
.pg-ai-implementation .pgc-center{text-align:center;}
.pg-ai-implementation .pgc-h2{margin:0 auto;max-width:18em;font:var(--h2-w) var(--h2)/var(--h2-lh) var(--font-sans);letter-spacing:var(--h2-ls);color:var(--fg);text-wrap:balance;}
.pg-ai-implementation .pgc-lede{margin:var(--s5) auto 0;max-width:32em;font:400 20px/1.5 var(--font-sans);color:rgba(255,255,255,.82);text-wrap:pretty;}
.pg-ai-implementation .pgc-lede--fg{color:var(--fg);}
.pg-ai-implementation .pgc-money{color:var(--accent);white-space:nowrap;}
.pg-ai-implementation .pgc-nb{white-space:nowrap;}

/* ---------- 1 · hero: copy left, the booking card right */
.pg-ai-implementation .pgc-hero{padding:calc(var(--nav-clear) + var(--s6)) var(--edge) var(--s9);
  background:radial-gradient(40% 55% at 28% 85%,rgba(250,85,57,.16),rgba(250,85,57,0) 70%),var(--bg);}
.pg-ai-implementation .pgc-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--s8);align-items:stretch;}
.pg-ai-implementation .pgc-hero-copy{min-width:0;display:flex;flex-direction:column;padding-top:var(--s5);}
.pg-ai-implementation .pgc-facts{margin:0;font:400 14px/18px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.pg-ai-implementation .pgc-facts-s{display:none;}
.pg-ai-implementation .pgc-h1{margin:var(--s5) 0 0;font:700 min(42px,calc((min(100vw - 96px, 1120px) - 464px) / 17))/1.05 var(--font-sans);letter-spacing:-.02em;text-transform:uppercase;color:var(--fg);white-space:nowrap;}
@media (max-width:1023px){.pg-ai-implementation .pgc-h1{white-space:normal;font-size:clamp(30px,5.2vw,44px);}}
.pg-ai-implementation .pgc-sub{margin:var(--s5) 0 0;max-width:none;font:400 24px/1.4 var(--font-sans);color:var(--fg);text-wrap:pretty;}
.pg-ai-implementation .pgc-trust{scroll-margin-top:calc(var(--nav-clear) + var(--s6));display:flex;align-items:center;gap:var(--s5);margin-top:auto;padding-top:var(--s6);}
.pg-ai-implementation .pgc-trust-badge{flex:none;display:block;width:112px;height:112px;}
.pg-ai-implementation .pgc-svcs{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:var(--s4) var(--s7);}
.pg-ai-implementation .pgc-svcs li{display:flex;align-items:center;gap:var(--s3);font:500 18px/1.3 var(--font-sans);color:var(--fg);}
.pg-ai-implementation .pgc-svc-i{flex:none;display:block;width:28px;height:28px;padding:var(--s2);box-sizing:content-box;border-radius:12px;background:rgba(250,85,57,.14);color:var(--accent);}
.pg-ai-implementation .pgc-form-us{margin:var(--s4) 0 0;font:500 14px/1.4 var(--font-sans);color:#33475b;text-align:center;}

/* ---------- the booking card (both slots) */
.pg-ai-implementation .pgc-form-card{display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:var(--s5);border-radius:var(--r-lg);}
.pg-ai-implementation .pgc-prog{display:flex;justify-content:space-between;font:400 14px/18px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#5b6b7b;}
.pg-ai-implementation .pgc-prog-bar{height:6px;margin:var(--s2) 0 var(--s5);border-radius:999px;background:#eef2f6;overflow:hidden;}
.pg-ai-implementation .pgc-prog-bar span{display:block;width:100%;height:100%;border-radius:999px;background:var(--accent);transform:scaleX(.5);transform-origin:left center;transition:transform .3s ease;}
.pg-ai-implementation .pgc-form-h{margin:0 0 var(--s1);font:600 20px/1.3 var(--font-sans);letter-spacing:-.015em;color:var(--accent-ink);}
.pg-ai-implementation .pgc-form-sub{margin:0 0 var(--s5);font:400 16px/1.45 var(--font-sans);color:#33475b;}
.pg-ai-implementation .pgc-book .pgc-form-h,.pg-ai-implementation .pgc-book .pgc-form-sub{display:none;}
.pg-ai-implementation .pgc-form{display:flex;flex-direction:column;flex:1;padding-top:0;}
.pg-ai-implementation .pgc-step{margin:0;padding:0;border:0;min-width:0;}
.pg-ai-implementation legend.sr-only{font-size:16px;}
.pg-ai-implementation .pgc-form .k-field{margin:0 0 var(--s4);}
.pg-ai-implementation .pgc-form .k-field>span{margin:0 0 var(--s2);font-size:14px;}
.pg-ai-implementation .pgc-form .k-field input,.pg-ai-implementation .pgc-form .k-field select{border-color:transparent;background-color:#eef2f6;font-size:16px;}
.pg-ai-implementation .pgc-form .k-field select{padding-right:var(--s6);}
.pg-ai-implementation .pgc-form .k-btn{width:100%;justify-content:center;height:52px;font-size:16px;margin-top:var(--s2);padding-left:var(--s5);padding-right:var(--s5);}
.pg-ai-implementation .pgc-back{display:block;margin:var(--s2) auto 0;padding:var(--s3) var(--s4);border:0;background:none;font:400 14px/1 var(--font-sans);color:#5b6b7b;cursor:pointer;}
.pg-ai-implementation .pgc-form-proof{margin:var(--s4) 0 0;padding:var(--s3) var(--s4);border-radius:12px;background:#f4f6f8;font:400 14px/1.45 var(--font-sans);color:#33475b;text-align:center;text-wrap:balance;}
.pg-ai-implementation .pgc-form-proof strong{font-weight:600;color:#b23a1f;}
.pg-ai-implementation .pgc-hero .pgc-form-proof{display:none;}
.pg-ai-implementation .pgc-form-rate{display:block;margin-top:var(--s1);font-weight:500;color:#33475b;}
.pg-ai-implementation .pgc-form-status{margin:var(--s2) 0 0;font:500 14px/1.45 var(--font-sans);color:var(--accent-ink);text-align:center;}
.pg-ai-implementation .pgc-form-status:empty{display:none;}

/* ---------- 2 · the triple guarantee: the homepage band as it shows live (dark ground, gold seals; src/css/super/guarantee.css + accents) */
.pg-ai-implementation .pgc-guar{background:var(--bg);}
.pg-ai-implementation .pgc-guar-eyebrow{margin:0;font:400 14px/18px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gnar-proof,#f4c66e);}
.pg-ai-implementation .pgc-guar-h{margin:var(--s4) auto 0;font:var(--h2-w) var(--h2)/var(--h2-lh) var(--font-sans);letter-spacing:var(--h2-ls);color:var(--fg);text-wrap:balance;}
.pg-ai-implementation .pgc-badges{list-style:none;margin:var(--s8) auto;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);max-width:960px;}
.pg-ai-implementation .pgc-badge{display:flex;flex-direction:column;align-items:center;text-align:center;}
.pg-ai-implementation .pgc-seal{display:block;width:160px;height:160px;margin-bottom:var(--s5);}
.pg-ai-implementation .pgc-seal-rosette{fill:#151313;}
.pg-ai-implementation .pgc-seal-line{fill:none;stroke:#f4c66e;stroke-width:1.5;}
.pg-ai-implementation .pgc-seal-in{fill:rgba(244,198,110,.14);stroke:#f4c66e;stroke-width:1.5;}
.pg-ai-implementation .pgc-seal-ring,.pg-ai-implementation .pgc-seal-sm{font:500 12px/1 var(--font-mono);letter-spacing:0;text-transform:uppercase;fill:#f4c66e;}
.pg-ai-implementation .pgc-seal-big{font:700 44px/1 var(--font-sans);fill:#f4c66e;}
.pg-ai-implementation .pgc-seal-num{font:700 28px/1 var(--font-sans);letter-spacing:-.02em;fill:#f4c66e;}
.pg-ai-implementation .pgc-seal-check{fill:none;stroke:#f4c66e;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;}
.pg-ai-implementation .pgc-badge-h{margin:0;font:var(--h4-w) var(--h4)/var(--h4-lh) var(--font-sans);letter-spacing:-.01em;color:var(--fg);}
.pg-ai-implementation .pgc-badge p{margin:var(--s2) 0 0;max-width:20em;font:400 16px/1.5 var(--font-sans);color:rgba(255,255,255,.82);text-wrap:pretty;}
.pg-ai-implementation .pgc-btn-ink{display:inline-flex;align-items:center;height:52px;padding:0 var(--s6);border-radius:999px;background:var(--accent);color:#fff;font:500 16px/1 var(--font-sans);text-decoration:none;transition:background .2s ease,transform .12s ease;}
.pg-ai-implementation .pgc-btn-ink:hover{background:var(--accent-hover);}
.pg-ai-implementation .pgc-btn-ink:active{transform:scale(.97);}
.pg-ai-implementation .pgc-btn-ink:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------- 3 · the Clutch review wall: even rows, the first 6 behind "Show all 20 reviews" */
.pg-ai-implementation .pgc-reviews{padding-top:0;}
.pg-ai-implementation .pgc-reviews .pgc-h2{margin-top:var(--s4);}
.pg-ai-implementation .k-eyebrow{justify-content:center;margin:0;font-size:14px;line-height:18px;letter-spacing:.08em;}
.pg-ai-implementation .pgc-rev-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin-top:var(--s8);}
.pg-ai-implementation .pgc-rev{margin:0;display:flex;flex-direction:column;gap:var(--s5);padding:var(--s6);border-radius:var(--r);background:var(--c1);}
.pg-ai-implementation .pgc-stars{display:block;font:500 14px/1 var(--font-sans);color:var(--gnar-proof,#f4c66e);}
.pg-ai-implementation .pgc-rev blockquote{margin:0;}
.pg-ai-implementation .pgc-rev blockquote p{margin:0;font:400 18px/1.5 var(--font-sans);color:var(--fg);text-wrap:pretty;}
.pg-ai-implementation .pgc-rev figcaption{margin-top:auto;display:grid;gap:var(--s1);font:400 14px/1.4 var(--font-sans);color:rgba(255,255,255,.78);}
.pg-ai-implementation .pgc-rev figcaption strong{font:600 16px/1.4 var(--font-sans);color:var(--fg);}
.pg-ai-implementation .pgc-rev-wall.is-short .pgc-rev[data-pg-ai-implementation-extra]{display:none;}
.pg-ai-implementation .pgc-rev-more{display:block;margin:var(--s6) auto 0;height:48px;padding:0 var(--s6);border:0;border-radius:999px;background:rgba(255,255,255,.08);color:var(--fg);font:500 16px/1 var(--font-sans);cursor:pointer;}
.pg-ai-implementation .pgc-rev-more:hover{background:rgba(255,255,255,.14);}
.pg-ai-implementation .pgc-rev-more[hidden]{display:none;}

/* ---------- 5 · two case studies */
.pg-ai-implementation .pgc-cases .pgc-h2{margin-top:var(--s4);}
.pg-ai-implementation .pgc-case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);margin:var(--s8) auto 0;}
.pg-ai-implementation .pgc-case-card{display:flex;flex-direction:column;padding:var(--s5) var(--s5) var(--s7);border-radius:var(--r-lg);background:radial-gradient(70% 80% at 0% 100%,rgba(250,85,57,.14),rgba(250,85,57,0) 70%),var(--surface-1,#151313);}
.pg-ai-implementation .pgc-case-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin:0 0 var(--s6);border-radius:12px;}
.pg-ai-implementation .pgc-case-client{margin:0;font:400 14px/18px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.pg-ai-implementation .pgc-case-h{margin:var(--s5) 0 0;font:var(--h3-w) var(--h3)/var(--h3-lh) var(--font-sans);letter-spacing:var(--h3-ls);color:var(--fg);text-wrap:balance;}
.pg-ai-implementation .pgc-case-p{margin:var(--s4) 0 0;padding-top:0;max-width:30em;font:400 18px/1.5 var(--font-sans);color:rgba(255,255,255,.82);text-wrap:pretty;}

/* ---------- 4 · book the call */
.pg-ai-implementation .pgc-book{padding:var(--pad) var(--edge) 0;}
.pg-ai-implementation .pgc-book-card{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--s8);align-items:center;max-width:calc(var(--w) + var(--s8) * 2);margin:0 auto;padding:var(--s8);border-radius:var(--r-lg);overflow:hidden;}
.pg-ai-implementation .pgc-book-bg{position:absolute;inset:0;z-index:-1;}
.pg-ai-implementation .pgc-book-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;}
.pg-ai-implementation .pgc-book-bg::after{content:"";position:absolute;inset:0;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);background-image:linear-gradient(rgba(0,0,0,.35) 30%,rgba(102,102,102,.3) 80%);}
.pg-ai-implementation .pgc-book .pgc-h2{margin:0;text-align:left;}
.pg-ai-implementation .pgc-book-who{display:flex;align-items:center;gap:var(--s4);margin:var(--s6) 0 0;font:500 20px/1.45 var(--font-sans);color:var(--fg);}
.pg-ai-implementation .pgc-book-pete{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;}

/* ---------- phone bottom bar */
.pg-ai-implementation .pgc-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));background:rgba(15,13,13,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
.pg-ai-implementation .pgc-bar p{margin:0;font-size:14px;line-height:1.4;color:var(--fg-small);}
.pg-ai-implementation .pgc-bar .k-btn{flex:none;}

/* ---------- tablet and phone: one column; the form right under the offer so the button shows on the first screen */
@media (max-width:1023px){
  .pg-ai-implementation .pgc-svcs{order:3;}
  .pg-ai-implementation .pgc-rev-wall{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pg-ai-implementation .pgc-hero-grid,.pg-ai-implementation .pgc-book-card{grid-template-columns:minmax(0,1fr);gap:var(--s6);}
  .pg-ai-implementation .pgc-hero-grid{max-width:640px;margin:0 auto;gap:0;}
  .pg-ai-implementation .pgc-hero-copy{display:contents;padding-top:0;}
  .pg-ai-implementation .pgc-facts{order:1;} .pg-ai-implementation .pgc-h1{order:2;} .pg-ai-implementation .pgc-sub{order:3;}
  .pg-ai-implementation .pgc-hero-grid > .pgc-form-card{order:4;margin-top:var(--s5);}
  .pg-ai-implementation .pgc-trust{order:5;margin-top:var(--s8);padding-top:0;}
  .pg-ai-implementation .pgc-book-card{padding:var(--s6);}
}
@media (max-width:767px){
  .pg-ai-implementation .pgc-hero{padding:calc(var(--nav-clear) + var(--s2)) var(--edge) var(--s8);}
  .pg-ai-implementation .pgc-h1{margin-top:var(--s3);font-size:30px;}
  .pg-ai-implementation .pgc-h2,.pg-ai-implementation .pgc-guar-h{font-size:28px;line-height:1.12;}
  .pg-ai-implementation .pgc-rev blockquote p,.pg-ai-implementation .pgc-case-p{font-size:16px;}
  .pg-ai-implementation .pgc-case-card{min-height:0;padding:var(--s6) var(--s5);}
  .pg-ai-implementation .pgc-case-p{padding-top:var(--s5);}
  .pg-ai-implementation .pgc-sub{margin-top:var(--s3);font-size:18px;}
  .pg-ai-implementation .pgc-svcs{margin-top:var(--s4);gap:var(--s3) var(--s4);}
  .pg-ai-implementation .pgc-svcs li{font-size:15px;gap:var(--s2);}
  .pg-ai-implementation .pgc-svc-i{width:20px;height:20px;padding:6px;border-radius:10px;}
  .pg-ai-implementation .pgc-hero-grid > .pgc-form-card{margin-top:var(--s5);}
  .pg-ai-implementation .pgc-hero .pgc-form-h{margin-bottom:var(--s4);}
  .pg-ai-implementation .pgc-trust{gap:var(--s4);}
  .pg-ai-implementation .pgc-trust-badge{width:72px;height:72px;}
  .pg-ai-implementation .pgc-guar .pgc-btn-ink{display:flex;justify-content:center;width:100%;}
  .pg-ai-implementation .pgc-badges{grid-template-columns:minmax(0,1fr);gap:var(--s5);margin:var(--s7) auto;text-align:left;}
  .pg-ai-implementation .pgc-badge{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:var(--s4);align-items:center;text-align:left;}
  .pg-ai-implementation .pgc-badge .pgc-seal{grid-row:1 / span 2;width:96px;height:96px;margin:0;}
  .pg-ai-implementation .pgc-badge-h{align-self:end;} .pg-ai-implementation .pgc-badge p{align-self:start;margin-top:var(--s1);}
  .pg-ai-implementation .pgc-rev-wall,.pg-ai-implementation .pgc-case-grid{grid-template-columns:minmax(0,1fr);gap:var(--s3);margin-top:var(--s7);}
  .pg-ai-implementation .pgc-rev{padding:var(--s5);}
  .pg-ai-implementation .pgc-case-card{padding:var(--s6) var(--s5);}
  .pg-ai-implementation .pgc-case-h{font-size:21px;line-height:1.2;text-wrap:pretty;}
  .pg-ai-implementation .pgc-book{padding:var(--pad) var(--s2) 0;}
  .pg-ai-implementation .pgc-book-card{padding:var(--s6) var(--s5);}
  .pg-ai-implementation .pgc-book-who{font-size:18px;}
  .pg-ai-implementation .pgc-bar.is-on{display:flex;}
}
@media (prefers-reduced-motion:reduce){.pg-ai-implementation .pgc-prog-bar span,.pg-ai-implementation .pgc-btn-ink{transition:none;}}

/* readability (Evan 11/10, "as readable as possible"): white on Gnar orange is 3.27:1, so button labels are large text (19px semi-bold passes 3:1) */
.pg-ai-implementation .pgc-form .k-btn,.pg-ai-implementation .pgc-btn-ink,.pg-ai-implementation .pgc-bar .k-btn{font-size:19px;font-weight:600;}
@media (max-width:767px){.pg-ai-implementation .pgc-prog{gap:var(--s3);letter-spacing:.03em;}}
@media (max-width:379px){.pg-ai-implementation .pgc-prog-t + .pgc-prog-t{display:none;}}
@media (max-width:767px){.pg-ai-implementation .pgc-prog-t{white-space:nowrap;} .pg-ai-implementation .pgc-book .pgc-prog-t + .pgc-prog-t{display:none;}}

/* ---------- round 2, 2026-11-12 (Evan): the live page plus why self-implementation fails, don't get left behind,
   what makes Gnar different, not sure where to start, and the "ready to move" closing call */
.pg-ai-implementation .pgc-problem,.pg-ai-implementation .pgc-left,.pg-ai-implementation .pgc-diff,.pg-ai-implementation .pgc-start{padding-top:0;}
.pg-ai-implementation .pgc-narrow{max-width:760px;}
.pg-ai-implementation .pgc-problem .pgc-h2{margin:0 auto var(--s6);max-width:none;text-align:center;}
.pg-ai-implementation .pgc-problem .pgc-narrow{margin-left:auto;margin-right:auto;}
.pg-ai-implementation .pgc-body{margin:0 0 var(--s5);font:400 20px/1.6 var(--font-sans);color:rgba(255,255,255,.82);text-wrap:pretty;}
.pg-ai-implementation .pgc-body:last-child{margin-bottom:0;}

.pg-ai-implementation .pgc-svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);margin-top:var(--s8);}
.pg-ai-implementation .pgc-svc-card{padding:var(--s6);border-radius:var(--r-lg);background:var(--surface-1,#151313);}
.pg-ai-implementation .pgc-svc-card .pgc-svc-i{margin-bottom:var(--s5);}
.pg-ai-implementation .pgc-svc-h{margin:0;font:var(--h4-w) var(--h4)/var(--h4-lh) var(--font-sans);letter-spacing:-.01em;color:var(--fg);}
.pg-ai-implementation .pgc-svc-card p{margin:var(--s3) 0 0;font:400 16px/1.55 var(--font-sans);color:rgba(255,255,255,.8);text-wrap:pretty;}

.pg-ai-implementation .pgc-diff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin-top:var(--s8);}
.pg-ai-implementation .pgc-diff-card{padding:var(--s6);border-radius:var(--r-lg);background:var(--surface-1,#151313);}
.pg-ai-implementation .pgc-diff-h{margin:0;font:var(--h4-w) var(--h4)/var(--h4-lh) var(--font-sans);letter-spacing:-.01em;color:var(--fg);}
.pg-ai-implementation .pgc-diff-card p{margin:var(--s4) 0 0;font:400 16px/1.55 var(--font-sans);color:rgba(255,255,255,.8);text-wrap:pretty;}
.pg-ai-implementation .pgc-handoff{margin:var(--s6) auto 0;max-width:46em;text-align:center;font:400 20px/1.5 var(--font-sans);color:rgba(255,255,255,.82);text-wrap:balance;}
.pg-ai-implementation .pgc-handoff strong{color:var(--fg);font-weight:600;}

.pg-ai-implementation .pgc-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);max-width:800px;margin:var(--s8) auto 0;text-align:left;}
.pg-ai-implementation .pgc-opt{padding:var(--s6);border-radius:var(--r-lg);background:radial-gradient(70% 120% at 0% 100%,rgba(250,85,57,.16),rgba(250,85,57,0) 70%),var(--surface-1,#151313);}
.pg-ai-implementation .pgc-opt-k{margin:0;font:400 14px/18px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.pg-ai-implementation .pgc-opt-h{margin:var(--s3) 0 0;font:var(--h3-w) var(--h3)/var(--h3-lh) var(--font-sans);letter-spacing:var(--h3-ls);color:var(--fg);text-wrap:balance;}
.pg-ai-implementation .pgc-start .pgc-lede{margin-top:var(--s7);}
.pg-ai-implementation .pgc-start-btn{margin-top:var(--s6);}

.pg-ai-implementation .pgc-book-lede{margin:var(--s5) 0 0;font:400 20px/1.5 var(--font-sans);color:rgba(255,255,255,.88);text-wrap:pretty;}
.pg-ai-implementation .pgc-book-who strong{font-weight:600;}
.pg-ai-implementation .pgc-form-us{text-wrap:balance;}

@media (max-width:1023px){
  .pg-ai-implementation .pgc-svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pg-ai-implementation .pgc-diff-grid{grid-template-columns:minmax(0,1fr);max-width:640px;margin-left:auto;margin-right:auto;}
}
@media (max-width:767px){
  .pg-ai-implementation .pgc-body,.pg-ai-implementation .pgc-handoff,.pg-ai-implementation .pgc-book-lede{font-size:17px;}
  .pg-ai-implementation .pgc-svc-grid,.pg-ai-implementation .pgc-opts{grid-template-columns:minmax(0,1fr);gap:var(--s3);margin-top:var(--s7);}
  .pg-ai-implementation .pgc-diff-grid{gap:var(--s3);margin-top:var(--s7);}
  .pg-ai-implementation .pgc-svc-card,.pg-ai-implementation .pgc-diff-card,.pg-ai-implementation .pgc-opt{padding:var(--s5);}
  .pg-ai-implementation .pgc-opt-h{font-size:22px;line-height:1.2;}
  .pg-ai-implementation .pgc-start .pgc-btn-ink{display:flex;justify-content:center;width:100%;}
}
@media (max-width:767px){.pg-ai-implementation .pgc-h1{font-size:min(30px,7.2vw);}}

/* ---------- problems we solve (Evan 2026-11-12): five cards with an icon, 3 on top and 2 centred below */
.pg-ai-implementation .pgc-probs{padding-top:0;}
.pg-ai-implementation .pgc-probs .pgc-h2{max-width:20em;}
.pg-ai-implementation .pgc-prob-list{list-style:none;margin:var(--s8) auto 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s5);}
.pg-ai-implementation .pgc-prob{grid-column:span 2;padding:var(--s6);border-radius:var(--r-lg);background:var(--surface-1,#151313);}
.pg-ai-implementation .pgc-prob:nth-child(4){grid-column:2 / span 2;}
.pg-ai-implementation .pgc-prob .pgc-svc-i{margin-bottom:var(--s5);}
.pg-ai-implementation .pgc-prob-h{margin:0;font:var(--h4-w) var(--h4)/var(--h4-lh) var(--font-sans);letter-spacing:-.01em;color:var(--fg);text-wrap:balance;}
.pg-ai-implementation .pgc-prob p{margin:var(--s3) 0 0;font:400 16px/1.55 var(--font-sans);color:rgba(255,255,255,.8);text-wrap:pretty;}
@media (max-width:1023px){
  .pg-ai-implementation .pgc-prob-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pg-ai-implementation .pgc-prob,.pg-ai-implementation .pgc-prob:nth-child(4){grid-column:auto;}
  .pg-ai-implementation .pgc-prob:nth-child(5){grid-column:1 / -1;}
}
@media (max-width:767px){
  .pg-ai-implementation .pgc-prob-list{grid-template-columns:minmax(0,1fr);gap:var(--s3);margin-top:var(--s7);}
  .pg-ai-implementation .pgc-prob,.pg-ai-implementation .pgc-prob:nth-child(5){grid-column:auto;padding:var(--s5);}
}

/* ---------- hero sizing (Evan 2026-11-12: the headline read small for its column). Laptop and up only. */
@media (min-width:1024px){
  .pg-ai-implementation .pgc-hero-grid{align-items:center;}
  .pg-ai-implementation .pgc-h1{font-size:clamp(44px,4.2vw,54px);line-height:1.02;}
  .pg-ai-implementation .pgc-sub{font-size:22px;}
}

/* ---------- round 4 (Evan 2026-11-12): centered cards, tighter service cards, Clutch-style seals, HorizonX motion */
/* Card text is centered: each card is an icon, a title and 3 lines or fewer, set in a symmetric grid under a
   centered heading. Short blocks like these read well centered; long copy stays left. */
.pg-ai-implementation .pgc-prob,.pg-ai-implementation .pgc-svc-card,.pg-ai-implementation .pgc-diff-card{text-align:center;}
.pg-ai-implementation .pgc-prob .pgc-svc-i,.pg-ai-implementation .pgc-svc-card .pgc-svc-i{display:block;margin-left:auto;margin-right:auto;}
.pg-ai-implementation .pgc-prob p,.pg-ai-implementation .pgc-svc-card p,.pg-ai-implementation .pgc-diff-card p{margin-left:auto;margin-right:auto;}
/* "Don't get left behind": less padding, the grid as wide as the closing card, so each line holds more words */
.pg-ai-implementation .pgc-svc-grid{gap:var(--s4);}
.pg-ai-implementation .pgc-svc-card{padding:var(--s5);}
.pg-ai-implementation .pgc-svc-card .pgc-svc-i{margin-bottom:var(--s3);}
.pg-ai-implementation .pgc-svc-card p{margin-top:var(--s2);}
@media (min-width:1360px){.pg-ai-implementation .pgc-left .pgc-wrap{max-width:calc(var(--w) + var(--s8) * 2);}}
/* "What makes The Gnar Company different": a seal per card, drawn like the homepage Clutch seal (src/css/super/creds.css) */
.pg-ai-implementation .pgc-dseal{width:128px;height:128px;margin:0 auto var(--s5);overflow:visible;}
.pg-ai-implementation .pgc-dseal-rosette{fill:var(--accent);}
.pg-ai-implementation .pgc-dseal-line{fill:none;stroke:var(--accent-ink);stroke-width:1.5;}
.pg-ai-implementation .pgc-dseal-in{fill:var(--accent-ink);stroke:var(--accent);stroke-width:1.5;}
.pg-ai-implementation .pgc-dseal-ring{font:500 12px/1 var(--font-mono);letter-spacing:0;fill:var(--accent-ink);text-transform:uppercase;}
.pg-ai-implementation .pgc-dseal-num{font:700 28px/1 var(--font-sans);letter-spacing:-.02em;fill:var(--accent);}
.pg-ai-implementation .pgc-dseal-sm{font:500 10px/1 var(--font-mono);letter-spacing:.02em;fill:var(--accent);text-transform:uppercase;}
/* the ring words turn once every 40 seconds and stop under the pointer (HorizonX text-ring: one rotating group) */
.pg-ai-implementation .pgc-dseal-spin{transform-box:view-box;transform-origin:80px 80px;animation:pgc-ring 40s linear infinite;}
.pg-ai-implementation .pgc-diff-card:hover .pgc-dseal-spin{animation-play-state:paused;}
@keyframes pgc-ring{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.pg-ai-implementation .pgc-dseal-spin{animation:none;}}
@media (max-width:767px){
  .pg-ai-implementation .pgc-diff-card{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:var(--s4);align-items:center;text-align:left;}
  .pg-ai-implementation .pgc-diff-card .pgc-dseal{grid-row:1 / span 2;width:96px;height:96px;margin:0;}
  .pg-ai-implementation .pgc-diff-h{align-self:end;}
  .pg-ai-implementation .pgc-diff-card p{align-self:start;margin:var(--s1) 0 0;}
}
/* pixel hover on the problem cards (motion.js): the canvas sits under the words */
.pg-ai-implementation .pgc-prob{position:relative;isolation:isolate;overflow:hidden;}
.pg-ai-implementation .pgc-prob > :not(.pgc-pix){position:relative;z-index:1;}
.pg-ai-implementation .pgc-pix{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:.5;}
/* bloom hover on the booking links (motion.js adds the spans; HorizonX interactive-hover-button) */
.pg-ai-implementation .pgc-ihb{position:relative;overflow:hidden;isolation:isolate;justify-content:center;}
.pg-ai-implementation .pgc-ihb-fill{position:absolute;left:20%;top:40%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--fg);transform:scale(0);pointer-events:none;z-index:0;
  transition:transform .4s ease;}
.pg-ai-implementation .pgc-ihb-rest{position:relative;z-index:1;display:inline-block;white-space:nowrap;transition:transform .3s ease,opacity .3s ease;}
.pg-ai-implementation .pgc-ihb-swap{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:var(--s2);color:var(--accent-ink);white-space:nowrap;transform:translateX(48px);opacity:0;pointer-events:none;
  transition:transform .3s ease,opacity .3s ease;}
.pg-ai-implementation .pgc-ihb-swap svg{width:1.1em;height:1.1em;flex:none;}
@media (hover:hover){
  .pg-ai-implementation .pgc-ihb:hover .pgc-ihb-fill,.pg-ai-implementation .pgc-ihb:focus-visible .pgc-ihb-fill{transform:scale(90);}
  .pg-ai-implementation .pgc-ihb:hover .pgc-ihb-rest,.pg-ai-implementation .pgc-ihb:focus-visible .pgc-ihb-rest{transform:translateX(48px);opacity:0;}
  .pg-ai-implementation .pgc-ihb:hover .pgc-ihb-swap,.pg-ai-implementation .pgc-ihb:focus-visible .pgc-ihb-swap{transform:translateX(0);opacity:1;}
  .pg-ai-implementation .pgc-btn-ink.pgc-ihb:hover{background:var(--accent);}
}
@media (prefers-reduced-motion:reduce){.pg-ai-implementation .pgc-ihb-fill,.pg-ai-implementation .pgc-ihb-rest,.pg-ai-implementation .pgc-ihb-swap{transition:none;}}
/* the closing wave (motion.js, HorizonX stripe-gradient) replaces the blurred photo when WebGL runs */
.pg-ai-implementation .pgc-wave{position:absolute;inset:0;width:100%;height:100%;display:block;}
.pg-ai-implementation .pgc-book-bg.is-wave img{visibility:hidden;}
.pg-ai-implementation .pgc-book-bg.is-wave::after{z-index:1;-webkit-backdrop-filter:none;backdrop-filter:none;background-image:linear-gradient(90deg,rgba(15,13,13,.55) 0%,rgba(15,13,13,.2) 60%,rgba(15,13,13,.35) 100%);}

/* ---------- round 5 (Evan 2026-11-12): the client logos above the fold, beside the partner badge.
   Round 6 (Evan, same day): the 3 by 3 grid looked busy. The logos now scroll in a window three logos wide,
   set further right with more room after the badge. Reuses the kit strip (.k-logos, .k-logos-track) and its
   per-logo sizes (.lg-*); the motion is this page's own and stops for reduced motion. */
.pg-ai-implementation .pgc-trust{gap:var(--s8);}
.pg-ai-implementation .pgc-proof{min-width:0;}
.pg-ai-implementation .pgc-logos-t{margin:0 0 var(--s4);font:400 14px/18px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);}
/* Three whole logos at a time. Every logo gets an equal slot (a third of the window), centered in it, and the
   strip steps one slot over every 3.2s, pausing 2.6s with three complete logos showing (review round 2:
   a continuous crawl always had one logo half faded). 9 steps move one full set, so the loop is seamless.
   Full strength, no dimming. */
.pg-ai-implementation .pgc-proof{flex:1;}
.pg-ai-implementation .pgc-logo-run{container-type:inline-size;width:100%;max-width:480px;-webkit-mask-image:linear-gradient(90deg,#0000,#000 12px calc(100% - 12px),#0000);mask-image:linear-gradient(90deg,#0000,#000 12px calc(100% - 12px),#0000);}
.pg-ai-implementation .pgc-logo-run .k-logos-track{animation:28.8s cubic-bezier(.65,0,.35,1) infinite pgc-logo-step;}
.pg-ai-implementation .pgc-logo-run img{box-sizing:border-box;width:33.3333cqw;padding:0 10px;margin:0;object-fit:contain;opacity:1;}
.pg-ai-implementation .pgc-logo-run img.lg-mgb{height:calc(var(--logo-h) * 1.05);}
.pg-ai-implementation .pgc-proof .pgc-logos-t{text-align:center;}
@media (prefers-reduced-motion:reduce){.pg-ai-implementation .pgc-logo-run .k-logos-track{animation:none;}}
@keyframes pgc-logo-step{0.000%{transform:translateX(0.0000%)}9.028%{transform:translateX(0.0000%)}11.111%{transform:translateX(-3.7037%)}20.139%{transform:translateX(-3.7037%)}22.222%{transform:translateX(-7.4074%)}31.250%{transform:translateX(-7.4074%)}33.333%{transform:translateX(-11.1111%)}42.361%{transform:translateX(-11.1111%)}44.444%{transform:translateX(-14.8148%)}53.472%{transform:translateX(-14.8148%)}55.556%{transform:translateX(-18.5185%)}64.583%{transform:translateX(-18.5185%)}66.667%{transform:translateX(-22.2222%)}75.694%{transform:translateX(-22.2222%)}77.778%{transform:translateX(-25.9259%)}86.806%{transform:translateX(-25.9259%)}88.889%{transform:translateX(-29.6296%)}97.917%{transform:translateX(-29.6296%)}100%{transform:translateX(-33.3333%)}}
@media (min-width:1024px) and (max-width:1279px){
  /* small laptops: the 44px headline ran past its column into the form card at 1024 */
  .pg-ai-implementation .pgc-h1{font-size:min(44px,3.7vw);}
}
@media (max-width:1279px){
  /* the column is too narrow for the badge and three logos side by side: the badge and the label share a row,
     and the scrolling logos get the full width under them */
  .pg-ai-implementation .pgc-trust{display:grid;grid-template-columns:80px minmax(0,1fr);column-gap:var(--s5);row-gap:var(--s3);align-items:center;}
  .pg-ai-implementation .pgc-proof{display:contents;}
  .pg-ai-implementation .pgc-trust-badge{width:80px;height:80px;}
  .pg-ai-implementation .pgc-proof .pgc-logos-t{margin:0;text-align:left;align-self:end;}
  .pg-ai-implementation .pgc-logo-run{grid-column:1 / -1;max-width:none;}
}
@media (max-width:1023px){
  /* tablet and phone: the badge and logos sit right under the services, before the form */
  .pg-ai-implementation .pgc-trust{order:3;margin-top:var(--s6);}
  .pg-ai-implementation .pgc-svcs{order:3;}
  .pg-ai-implementation .pgc-hero-grid > .pgc-form-card{order:4;}
}
@media (max-width:767px){
  .pg-ai-implementation .pgc-trust{grid-template-columns:72px minmax(0,1fr);column-gap:var(--s4);margin-top:var(--s5);}
  .pg-ai-implementation .pgc-trust-badge{width:72px;height:72px;}
  .pg-ai-implementation .pgc-logo-run img{--logo-h:17px;padding:0 6px;}
}
/* /ai-implementation additions: the step label in the how-it-works cards, its button, and the built for / not for lists */
.pg-ai-implementation .pgc-svc-card .pgc-opt-k{margin:0 0 var(--s2);}
.pg-ai-implementation .pgc-how-cta{margin:var(--s7) 0 0;}
@media (max-width:767px){.pg-ai-implementation .pgc-how-cta .pgc-btn-ink{display:flex;justify-content:center;width:100%;}}
.pg-ai-implementation .pgc-guar-scope{margin:var(--s3) auto 0;max-width:40em;font:400 18px/1.5 var(--font-sans);color:rgba(255,255,255,.82);text-wrap:balance;}
.pg-ai-implementation .pgc-btn-note{margin:var(--s3) 0 0;font:400 15px/1.4 var(--font-sans);color:rgba(255,255,255,.86);text-align:center;}
@media (max-width:767px){.pg-ai-implementation .pgc-facts-l{display:none;}.pg-ai-implementation .pgc-facts-s{display:inline;}}
/* the booking block sits 128px under the last section, the same gap as every other section (panel round 1, 2026-11-12) */
.pg-ai-implementation .pgc-book{padding-top:0;}
/* panel round 1 (2026-11-12): more room around the partner badge on phones, step card text left-aligned for reading */
@media (max-width:767px){.pg-ai-implementation .pgc-trust{column-gap:var(--s5);row-gap:var(--s4);}.pg-ai-implementation .pgc-proof .pgc-logos-t{align-self:center;}}
.pg-ai-implementation .pgc-guar{padding-top:0;}
/* 1024 to 1179: the booking heading had 336px and set on 3 lines; a narrower form column and smaller heading keep it to 2 (full QA, 2026-11-12) */
@media (min-width:1024px) and (max-width:1179px){.pg-ai-implementation .pgc-book-card{grid-template-columns:minmax(0,1fr) 360px;column-gap:var(--s6);}.pg-ai-implementation .pgc-book .pgc-h2{font-size:38px;}}