/* page.css: /ai-development, copied from /claude-partner 2026-11-12 (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-development{
  --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-development{--edge:48px;}}
@media (max-width:767px){.pg-ai-development{--pad:var(--s8);--r:14px;--r-lg:16px;}}

/* ---------- shared */
.pg-ai-development .pgc-wrap{max-width:var(--w);margin:0 auto;}
.pg-ai-development section{padding:var(--pad) var(--edge);scroll-margin-top:var(--nav-clear);}
.pg-ai-development .pgc-center{text-align:center;}
.pg-ai-development .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-development .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-development .pgc-lede--fg{color:var(--fg);}
.pg-ai-development .pgc-money{color:var(--accent);white-space:nowrap;}
.pg-ai-development .pgc-nb{white-space:nowrap;}

/* ---------- 1 · hero: copy left, the booking card right */
.pg-ai-development .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-development .pgc-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--s8);align-items:stretch;}
.pg-ai-development .pgc-hero-copy{min-width:0;display:flex;flex-direction:column;padding-top:var(--s5);}
.pg-ai-development .pgc-facts{margin:0;font:400 14px/18px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.pg-ai-development .pgc-facts-s{display:none;}
.pg-ai-development .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-development .pgc-h1{white-space:normal;font-size:clamp(30px,5.2vw,44px);}}
.pg-ai-development .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-development .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-development .pgc-trust-badge{flex:none;display:block;width:112px;height:112px;}
.pg-ai-development .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-development .pgc-svcs li{display:flex;align-items:center;gap:var(--s3);font:500 18px/1.3 var(--font-sans);color:var(--fg);}
.pg-ai-development .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-development .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-development .pgc-form-card{display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:var(--s5);border-radius:var(--r-lg);}
.pg-ai-development .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-development .pgc-prog-bar{height:6px;margin:var(--s2) 0 var(--s5);border-radius:999px;background:#eef2f6;overflow:hidden;}
.pg-ai-development .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-development .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-development .pgc-form-sub{margin:0 0 var(--s5);font:400 16px/1.45 var(--font-sans);color:#33475b;}
.pg-ai-development .pgc-book .pgc-form-h,.pg-ai-development .pgc-book .pgc-form-sub{display:none;}
.pg-ai-development .pgc-form{display:flex;flex-direction:column;flex:1;padding-top:0;}
.pg-ai-development .pgc-step{margin:0;padding:0;border:0;min-width:0;}
.pg-ai-development legend.sr-only{font-size:16px;}
.pg-ai-development .pgc-form .k-field{margin:0 0 var(--s4);}
.pg-ai-development .pgc-form .k-field>span{margin:0 0 var(--s2);font-size:14px;}
.pg-ai-development .pgc-form .k-field input,.pg-ai-development .pgc-form .k-field select{border-color:transparent;background-color:#eef2f6;font-size:16px;}
.pg-ai-development .pgc-form .k-field select{padding-right:var(--s6);}
.pg-ai-development .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-development .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-development .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-development .pgc-form-proof strong{font-weight:600;color:#b23a1f;}
.pg-ai-development .pgc-hero .pgc-form-proof{display:none;}
.pg-ai-development .pgc-form-rate{display:block;margin-top:var(--s1);font-weight:500;color:#33475b;}
.pg-ai-development .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-development .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-development .pgc-guar{background:var(--bg);}
.pg-ai-development .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-development .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-development .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-development .pgc-badge{display:flex;flex-direction:column;align-items:center;text-align:center;}
.pg-ai-development .pgc-seal{display:block;width:160px;height:160px;margin-bottom:var(--s5);}
.pg-ai-development .pgc-seal-rosette{fill:#151313;}
.pg-ai-development .pgc-seal-line{fill:none;stroke:#f4c66e;stroke-width:1.5;}
.pg-ai-development .pgc-seal-in{fill:rgba(244,198,110,.14);stroke:#f4c66e;stroke-width:1.5;}
.pg-ai-development .pgc-seal-ring,.pg-ai-development .pgc-seal-sm{font:500 12px/1 var(--font-mono);letter-spacing:0;text-transform:uppercase;fill:#f4c66e;}
.pg-ai-development .pgc-seal-big{font:700 44px/1 var(--font-sans);fill:#f4c66e;}
.pg-ai-development .pgc-seal-num{font:700 28px/1 var(--font-sans);letter-spacing:-.02em;fill:#f4c66e;}
.pg-ai-development .pgc-seal-check{fill:none;stroke:#f4c66e;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;}
.pg-ai-development .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-development .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-development .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-development .pgc-btn-ink:hover{background:var(--accent-hover);}
.pg-ai-development .pgc-btn-ink:active{transform:scale(.97);}
.pg-ai-development .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-development .pgc-reviews{padding-top:0;}
.pg-ai-development .pgc-reviews .pgc-h2{margin-top:var(--s4);}
.pg-ai-development .k-eyebrow{justify-content:center;margin:0;font-size:14px;line-height:18px;letter-spacing:.08em;}
.pg-ai-development .pgc-rev-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin-top:var(--s8);}
.pg-ai-development .pgc-rev{margin:0;display:flex;flex-direction:column;gap:var(--s5);padding:var(--s6);border-radius:var(--r);background:var(--c1);}
.pg-ai-development .pgc-stars{display:block;font:500 14px/1 var(--font-sans);color:var(--gnar-proof,#f4c66e);}
.pg-ai-development .pgc-rev blockquote{margin:0;}
.pg-ai-development .pgc-rev blockquote p{margin:0;font:400 18px/1.5 var(--font-sans);color:var(--fg);text-wrap:pretty;}
.pg-ai-development .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-development .pgc-rev figcaption strong{font:600 16px/1.4 var(--font-sans);color:var(--fg);}
.pg-ai-development .pgc-rev-wall.is-short .pgc-rev[data-pg-ai-development-extra]{display:none;}
.pg-ai-development .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-development .pgc-rev-more:hover{background:rgba(255,255,255,.14);}
.pg-ai-development .pgc-rev-more[hidden]{display:none;}

/* ---------- 5 · two case studies */
.pg-ai-development .pgc-cases .pgc-h2{margin-top:var(--s4);}
.pg-ai-development .pgc-case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);margin:var(--s8) auto 0;}
.pg-ai-development .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-development .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-development .pgc-case-client{margin:0;font:400 14px/18px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.pg-ai-development .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-development .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-development .pgc-book{padding:var(--pad) var(--edge) 0;}
.pg-ai-development .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-development .pgc-book-bg{position:absolute;inset:0;z-index:-1;}
.pg-ai-development .pgc-book-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;}
.pg-ai-development .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-development .pgc-book .pgc-h2{margin:0;text-align:left;}
.pg-ai-development .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-development .pgc-book-pete{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;}

/* ---------- phone bottom bar */
.pg-ai-development .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-development .pgc-bar p{margin:0;font-size:14px;line-height:1.4;color:var(--fg-small);}
.pg-ai-development .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-development .pgc-svcs{order:3;}
  .pg-ai-development .pgc-rev-wall{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pg-ai-development .pgc-hero-grid,.pg-ai-development .pgc-book-card{grid-template-columns:minmax(0,1fr);gap:var(--s6);}
  .pg-ai-development .pgc-hero-grid{max-width:640px;margin:0 auto;gap:0;}
  .pg-ai-development .pgc-hero-copy{display:contents;padding-top:0;}
  .pg-ai-development .pgc-facts{order:1;} .pg-ai-development .pgc-h1{order:2;} .pg-ai-development .pgc-sub{order:3;}
  .pg-ai-development .pgc-hero-grid > .pgc-form-card{order:4;margin-top:var(--s5);}
  .pg-ai-development .pgc-trust{order:5;margin-top:var(--s8);padding-top:0;}
  .pg-ai-development .pgc-book-card{padding:var(--s6);}
}
@media (max-width:767px){
  .pg-ai-development .pgc-hero{padding:calc(var(--nav-clear) + var(--s2)) var(--edge) var(--s8);}
  .pg-ai-development .pgc-h1{margin-top:var(--s3);font-size:30px;}
  .pg-ai-development .pgc-h2,.pg-ai-development .pgc-guar-h{font-size:28px;line-height:1.12;}
  .pg-ai-development .pgc-rev blockquote p,.pg-ai-development .pgc-case-p{font-size:16px;}
  .pg-ai-development .pgc-case-card{min-height:0;padding:var(--s6) var(--s5);}
  .pg-ai-development .pgc-case-p{padding-top:var(--s5);}
  .pg-ai-development .pgc-sub{margin-top:var(--s3);font-size:18px;}
  .pg-ai-development .pgc-svcs{margin-top:var(--s4);gap:var(--s3) var(--s4);}
  .pg-ai-development .pgc-svcs li{font-size:15px;gap:var(--s2);}
  .pg-ai-development .pgc-svc-i{width:20px;height:20px;padding:6px;border-radius:10px;}
  .pg-ai-development .pgc-hero-grid > .pgc-form-card{margin-top:var(--s5);}
  .pg-ai-development .pgc-hero .pgc-form-h{margin-bottom:var(--s4);}
  .pg-ai-development .pgc-trust{gap:var(--s4);}
  .pg-ai-development .pgc-trust-badge{width:72px;height:72px;}
  .pg-ai-development .pgc-guar .pgc-btn-ink{display:flex;justify-content:center;width:100%;}
  .pg-ai-development .pgc-badges{grid-template-columns:minmax(0,1fr);gap:var(--s5);margin:var(--s7) auto;text-align:left;}
  .pg-ai-development .pgc-badge{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:var(--s4);align-items:center;text-align:left;}
  .pg-ai-development .pgc-badge .pgc-seal{grid-row:1 / span 2;width:96px;height:96px;margin:0;}
  .pg-ai-development .pgc-badge-h{align-self:end;} .pg-ai-development .pgc-badge p{align-self:start;margin-top:var(--s1);}
  .pg-ai-development .pgc-rev-wall,.pg-ai-development .pgc-case-grid{grid-template-columns:minmax(0,1fr);gap:var(--s3);margin-top:var(--s7);}
  .pg-ai-development .pgc-rev{padding:var(--s5);}
  .pg-ai-development .pgc-case-card{padding:var(--s6) var(--s5);}
  .pg-ai-development .pgc-case-h{font-size:21px;line-height:1.2;text-wrap:pretty;}
  .pg-ai-development .pgc-book{padding:var(--pad) var(--s2) 0;}
  .pg-ai-development .pgc-book-card{padding:var(--s6) var(--s5);}
  .pg-ai-development .pgc-book-who{font-size:18px;}
  .pg-ai-development .pgc-bar.is-on{display:flex;}
}
@media (prefers-reduced-motion:reduce){.pg-ai-development .pgc-prog-bar span,.pg-ai-development .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-development .pgc-form .k-btn,.pg-ai-development .pgc-btn-ink,.pg-ai-development .pgc-bar .k-btn{font-size:19px;font-weight:600;}
@media (max-width:767px){.pg-ai-development .pgc-prog{gap:var(--s3);letter-spacing:.03em;}}
@media (max-width:379px){.pg-ai-development .pgc-prog-t + .pgc-prog-t{display:none;}}
@media (max-width:767px){.pg-ai-development .pgc-prog-t{white-space:nowrap;} .pg-ai-development .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-development .pgc-problem,.pg-ai-development .pgc-left,.pg-ai-development .pgc-diff,.pg-ai-development .pgc-start{padding-top:0;}
.pg-ai-development .pgc-narrow{max-width:760px;}
.pg-ai-development .pgc-problem .pgc-h2{margin:0 0 var(--s6);max-width:none;}
.pg-ai-development .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-development .pgc-body:last-child{margin-bottom:0;}

.pg-ai-development .pgc-svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);margin-top:var(--s8);}
.pg-ai-development .pgc-svc-card{padding:var(--s6);border-radius:var(--r-lg);background:var(--surface-1,#151313);}
.pg-ai-development .pgc-svc-card .pgc-svc-i{margin-bottom:var(--s5);}
.pg-ai-development .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-development .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-development .pgc-diff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin-top:var(--s8);}
.pg-ai-development .pgc-diff-card{padding:var(--s6);border-radius:var(--r-lg);background:var(--surface-1,#151313);}
.pg-ai-development .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-development .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-development .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-development .pgc-handoff strong{color:var(--fg);font-weight:600;}

.pg-ai-development .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-development .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-development .pgc-opt-k{margin:0;font:400 14px/18px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.pg-ai-development .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-development .pgc-start .pgc-lede{margin-top:var(--s7);}
.pg-ai-development .pgc-start-btn{margin-top:var(--s6);}

.pg-ai-development .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-development .pgc-book-who strong{font-weight:600;}
.pg-ai-development .pgc-form-us{text-wrap:balance;}

@media (max-width:1023px){
  .pg-ai-development .pgc-svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pg-ai-development .pgc-diff-grid{grid-template-columns:minmax(0,1fr);max-width:640px;margin-left:auto;margin-right:auto;}
}
@media (max-width:767px){
  .pg-ai-development .pgc-body,.pg-ai-development .pgc-handoff,.pg-ai-development .pgc-book-lede{font-size:17px;}
  .pg-ai-development .pgc-svc-grid,.pg-ai-development .pgc-opts{grid-template-columns:minmax(0,1fr);gap:var(--s3);margin-top:var(--s7);}
  .pg-ai-development .pgc-diff-grid{gap:var(--s3);margin-top:var(--s7);}
  .pg-ai-development .pgc-svc-card,.pg-ai-development .pgc-diff-card,.pg-ai-development .pgc-opt{padding:var(--s5);}
  .pg-ai-development .pgc-opt-h{font-size:22px;line-height:1.2;}
  .pg-ai-development .pgc-start .pgc-btn-ink{display:flex;justify-content:center;width:100%;}
}
@media (max-width:767px){.pg-ai-development .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-development .pgc-probs{padding-top:0;}
.pg-ai-development .pgc-probs .pgc-h2{max-width:20em;}
.pg-ai-development .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-development .pgc-prob{grid-column:span 2;padding:var(--s6);border-radius:var(--r-lg);background:var(--surface-1,#151313);}
.pg-ai-development .pgc-prob:nth-child(4){grid-column:2 / span 2;}
.pg-ai-development .pgc-prob .pgc-svc-i{margin-bottom:var(--s5);}
.pg-ai-development .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-development .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-development .pgc-prob-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pg-ai-development .pgc-prob,.pg-ai-development .pgc-prob:nth-child(4){grid-column:auto;}
  .pg-ai-development .pgc-prob:nth-child(5){grid-column:1 / -1;}
}
@media (max-width:767px){
  .pg-ai-development .pgc-prob-list{grid-template-columns:minmax(0,1fr);gap:var(--s3);margin-top:var(--s7);}
  .pg-ai-development .pgc-prob,.pg-ai-development .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-development .pgc-hero-grid{align-items:center;}
  .pg-ai-development .pgc-h1{font-size:clamp(44px,4.2vw,54px);line-height:1.02;}
  .pg-ai-development .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-development .pgc-prob,.pg-ai-development .pgc-svc-card,.pg-ai-development .pgc-diff-card{text-align:center;}
.pg-ai-development .pgc-prob .pgc-svc-i,.pg-ai-development .pgc-svc-card .pgc-svc-i{display:block;margin-left:auto;margin-right:auto;}
.pg-ai-development .pgc-prob p,.pg-ai-development .pgc-svc-card p,.pg-ai-development .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-development .pgc-svc-grid{gap:var(--s4);}
.pg-ai-development .pgc-svc-card{padding:var(--s5);}
.pg-ai-development .pgc-svc-card .pgc-svc-i{margin-bottom:var(--s3);}
.pg-ai-development .pgc-svc-card p{margin-top:var(--s2);}
@media (min-width:1360px){.pg-ai-development .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-development .pgc-dseal{width:128px;height:128px;margin:0 auto var(--s5);overflow:visible;}
.pg-ai-development .pgc-dseal-rosette{fill:var(--accent);}
.pg-ai-development .pgc-dseal-line{fill:none;stroke:var(--accent-ink);stroke-width:1.5;}
.pg-ai-development .pgc-dseal-in{fill:var(--accent-ink);stroke:var(--accent);stroke-width:1.5;}
.pg-ai-development .pgc-dseal-ring{font:500 12px/1 var(--font-mono);letter-spacing:0;fill:var(--accent-ink);text-transform:uppercase;}
.pg-ai-development .pgc-dseal-num{font:700 28px/1 var(--font-sans);letter-spacing:-.02em;fill:var(--accent);}
.pg-ai-development .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-development .pgc-dseal-spin{transform-box:view-box;transform-origin:80px 80px;animation:pgc-ring 40s linear infinite;}
.pg-ai-development .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-development .pgc-dseal-spin{animation:none;}}
@media (max-width:767px){
  .pg-ai-development .pgc-diff-card{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:var(--s4);align-items:center;text-align:left;}
  .pg-ai-development .pgc-diff-card .pgc-dseal{grid-row:1 / span 2;width:96px;height:96px;margin:0;}
  .pg-ai-development .pgc-diff-h{align-self:end;}
  .pg-ai-development .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-development .pgc-prob{position:relative;isolation:isolate;overflow:hidden;}
.pg-ai-development .pgc-prob > :not(.pgc-pix){position:relative;z-index:1;}
.pg-ai-development .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-development .pgc-ihb{position:relative;overflow:hidden;isolation:isolate;justify-content:center;}
.pg-ai-development .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-development .pgc-ihb-rest{position:relative;z-index:1;display:inline-block;white-space:nowrap;transition:transform .3s ease,opacity .3s ease;}
.pg-ai-development .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-development .pgc-ihb-swap svg{width:1.1em;height:1.1em;flex:none;}
@media (hover:hover){
  .pg-ai-development .pgc-ihb:hover .pgc-ihb-fill,.pg-ai-development .pgc-ihb:focus-visible .pgc-ihb-fill{transform:scale(90);}
  .pg-ai-development .pgc-ihb:hover .pgc-ihb-rest,.pg-ai-development .pgc-ihb:focus-visible .pgc-ihb-rest{transform:translateX(48px);opacity:0;}
  .pg-ai-development .pgc-ihb:hover .pgc-ihb-swap,.pg-ai-development .pgc-ihb:focus-visible .pgc-ihb-swap{transform:translateX(0);opacity:1;}
  .pg-ai-development .pgc-btn-ink.pgc-ihb:hover{background:var(--accent);}
}
@media (prefers-reduced-motion:reduce){.pg-ai-development .pgc-ihb-fill,.pg-ai-development .pgc-ihb-rest,.pg-ai-development .pgc-ihb-swap{transition:none;}}
/* the closing wave (motion.js, HorizonX stripe-gradient) replaces the blurred photo when WebGL runs */
.pg-ai-development .pgc-wave{position:absolute;inset:0;width:100%;height:100%;display:block;}
.pg-ai-development .pgc-book-bg.is-wave img{visibility:hidden;}
.pg-ai-development .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-development .pgc-trust{gap:var(--s8);}
.pg-ai-development .pgc-proof{min-width:0;}
.pg-ai-development .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-development .pgc-proof{flex:1;}
.pg-ai-development .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-development .pgc-logo-run .k-logos-track{animation:28.8s cubic-bezier(.65,0,.35,1) infinite pgc-logo-step;}
.pg-ai-development .pgc-logo-run img{box-sizing:border-box;width:33.3333cqw;padding:0 10px;margin:0;object-fit:contain;opacity:1;}
.pg-ai-development .pgc-logo-run img.lg-mgb{height:calc(var(--logo-h) * 1.05);}
.pg-ai-development .pgc-proof .pgc-logos-t{text-align:center;}
@media (prefers-reduced-motion:reduce){.pg-ai-development .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-development .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-development .pgc-trust{display:grid;grid-template-columns:80px minmax(0,1fr);column-gap:var(--s5);row-gap:var(--s3);align-items:center;}
  .pg-ai-development .pgc-proof{display:contents;}
  .pg-ai-development .pgc-trust-badge{width:80px;height:80px;}
  .pg-ai-development .pgc-proof .pgc-logos-t{margin:0;text-align:left;align-self:end;}
  .pg-ai-development .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-development .pgc-trust{order:3;margin-top:var(--s6);}
  .pg-ai-development .pgc-svcs{order:3;}
  .pg-ai-development .pgc-hero-grid > .pgc-form-card{order:4;}
}
@media (max-width:767px){
  .pg-ai-development .pgc-trust{grid-template-columns:72px minmax(0,1fr);column-gap:var(--s4);margin-top:var(--s5);}
  .pg-ai-development .pgc-trust-badge{width:72px;height:72px;}
  .pg-ai-development .pgc-logo-run img{--logo-h:17px;padding:0 6px;}
}

/* What it costs: three steps as cards, the price on its own line (no borders, no lines) */
.pg-ai-development .pgc-cost{padding-top:0;}
.pg-ai-development .pgc-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin:var(--s8) auto var(--s7);padding:0;text-align:left;}
.pg-ai-development .pgc-stepc{display:flex;flex-direction:column;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-development .pgc-step-price{margin:var(--s3) 0 0;font:600 20px/1.3 var(--font-sans);color:var(--accent);}
.pg-ai-development .pgc-step-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-development .pgc-step-tiers{margin:var(--s4) 0 0;font:400 14px/1.5 var(--font-mono);letter-spacing:.02em;color:rgba(255,255,255,.72);}
@media (max-width:1023px){.pg-ai-development .pgc-steps{grid-template-columns:minmax(0,1fr);max-width:640px;}}
@media (max-width:767px){.pg-ai-development .pgc-steps{gap:var(--s3);margin-top:var(--s7);} .pg-ai-development .pgc-stepc{padding:var(--s5);} .pg-ai-development .pgc-cost .pgc-btn-ink{display:flex;justify-content:center;width:100%;}}
/* /ai-development: phones show the short facts line */
@media (max-width:767px){.pg-ai-development .pgc-facts-l{display:none;} .pg-ai-development .pgc-facts-s{display:inline;}}
/* /ai-development: this headline is longer than /claude-partner's, so it caps lower to keep 24px+ clear of the form card */
@media (min-width:1280px){.pg-ai-development .pgc-h1{font-size:min(50px,3.6vw);}}
@media (min-width:1024px) and (max-width:1279px){.pg-ai-development .pgc-h1{font-size:min(44px,3.5vw);}}
.pg-ai-development .pgc-step-tiers span{display:block;}
.pg-ai-development .pgc-dseal-check{stroke:var(--accent);}
.pg-ai-development .pgc-steps{grid-template-columns:repeat(2,minmax(0,1fr));max-width:800px;} .pg-ai-development .pgc-cost-lede{margin-top:var(--s5);}
@media (max-width:1023px){.pg-ai-development .pgc-steps{grid-template-columns:minmax(0,1fr);max-width:640px;}}
.pg-ai-development .pgc-step-tiers{font:500 16px/1.6 var(--font-sans);letter-spacing:0;color:var(--fg);} .pg-ai-development .pgc-step-tiers b{font-weight:600;color:var(--accent);margin-left:.4em;}
/* round 2 (design review): tighter section gaps on laptops, readable client names, service cards as left-aligned rows on phones */
@media (min-width:768px){.pg-ai-development{--pad:96px;}}
@media (max-width:767px){.pg-ai-development{--pad:var(--s8);}}
.pg-ai-development .pgc-case-client{font:600 16px/1.3 var(--font-sans);letter-spacing:0;text-transform:none;}
@media (max-width:767px){.pg-ai-development .pgc-svc-card{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:var(--s4);text-align:left;} .pg-ai-development .pgc-svc-card .pgc-svc-i{grid-row:1 / span 2;margin:0;} .pg-ai-development .pgc-svc-card .pgc-svc-h{align-self:end;} .pg-ai-development .pgc-svc-card p{margin-top:var(--s2);}}
/* round 3 (design review): phone case cards keep the headline with its result, smaller seals beside the team text, Pete's role reads as a role, the Build card does not stretch */
@media (max-width:767px){.pg-ai-development .pgc-case-p{padding-top:0;margin-top:var(--s3);} .pg-ai-development .pgc-diff-card{grid-template-columns:64px minmax(0,1fr);} .pg-ai-development .pgc-diff-card .pgc-dseal{width:64px;height:64px;}}
.pg-ai-development .pgc-book-who span br + *,.pg-ai-development .pgc-book-who .pgc-who-role{font:400 14px/1.4 var(--font-sans);color:rgba(255,255,255,.72);}
.pg-ai-development .pgc-steps{align-items:start;}
.pg-ai-development .pgc-hero-rating{margin:var(--s4) 0 0;font:500 16px/1.4 var(--font-sans);color:var(--fg);} .pg-ai-development .pgc-hero-rating .gnar-rating-star{color:var(--gnar-proof,#f4c66e);}
@media (max-width:1023px){.pg-ai-development .pgc-hero-rating{order:3;}}