.elementor-12 .elementor-element.elementor-element-9897b81{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-1f034b4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-a2645c9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-379d95a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-e7cb22d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-9eb2130{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-01a1b61{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-1d1fe3c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-87b30d7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-2367767 *//* ============================================================
   PetDriven — Elementor Custom HTML section styles
   Palette pulled directly from the PetDriven logo mark:
   navy (dog), slate-grey (cat), forest green (bird / lizard / "Driven"),
   ocean blue (fish), tan (rabbit), olive (small animal)
   ============================================================ */

:root{
  --cream:#F5F4EF;
  --cream-2:#EAE7DC;
  --ink:#20241F;
  --ink-soft:rgba(32,36,31,.66);
  --ink-faint:rgba(32,36,31,.42);

  --navy:#263444;        /* dog silhouette */
  --navy-deep:#1B2532;
  --panel:#2E3D50;
  --panel-2:#374A60;

  --green:#4F7A38;       /* "Driven" wordmark / bird / lizard */
  --green-deep:#3E6129;
  --blue:#2E6CA8;        /* fish */
  --tan:#B98A54;         /* rabbit */
  --olive:#B7B36B;       /* small animal */
  --gray-cat:#8E99A1;    /* cat */

  --line:rgba(32,36,31,.14);
  --line-dark:rgba(255,255,255,.12);
  --radius-lg:28px;
  --radius-md:18px;
  --ease:cubic-bezier(.16,.84,.44,1);
}
.pd-scope *{box-sizing:border-box;}
.pd-scope{
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.pd-scope h1,.pd-scope h2,.pd-scope h3,.pd-scope h4{
  font-family:'Sora',sans-serif;
  margin:0;
  letter-spacing:-.01em;
}
.pd-scope p{margin:0;}
.pd-scope a{color:inherit;text-decoration:none;}
.pd-scope img,.pd-scope svg{display:block;}
.pd-scope ::selection{background:var(--green);color:#fff;}
@media (prefers-reduced-motion:reduce){
  .pd-scope *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

.pd-wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
.pd-scope section{position:relative;}

/* ---------- HERO ---------- */
.pd-hero{padding:90px 0 100px;overflow:hidden;perspective:1400px;}
.pd-hero-inner{position:relative;z-index:3;}
.pd-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Sora';font-weight:600;font-size:12.5px;
  color:var(--green);margin-bottom:22px;
}
.pd-eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--blue);}
.pd-hero h1{font-size:clamp(40px,6.4vw,78px);font-weight:700;line-height:1.02;max-width:820px;color:var(--ink);}
.pd-hero h1 .pd-accent{color:var(--green);}
.pd-hero p.pd-lead{max-width:480px;margin-top:26px;font-size:17.5px;color:var(--ink-soft);}
.pd-hero-ctas{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;}

.pd-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border-radius:999px;
  font-family:'Sora';font-weight:600;font-size:14.5px;
  cursor:pointer;border:none;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s;
}
.pd-btn-primary{background:var(--green);color:#fff;box-shadow:0 10px 24px -10px rgba(79,122,56,.55);}
.pd-btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 30px -10px rgba(79,122,56,.65);}
.pd-btn-primary:active{transform:translateY(0) scale(.98);}
.pd-btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);}
.pd-btn-ghost:hover{border-color:var(--ink);}
.pd-btn-dark{background:var(--navy);color:#fff;}
.pd-btn-dark:hover{transform:translateY(-3px) scale(1.02);}

.pd-orb-field{position:absolute;inset:0;transform-style:preserve-3d;z-index:1;pointer-events:none;}

/* ---------- HERO CRITTER BLOBS (3D floating silhouettes) ---------- */
.pd-blob{
  position:absolute;transform-style:preserve-3d;
  filter:drop-shadow(0 18px 26px rgba(32,36,31,.16));
  will-change:transform;
}
.pd-blob svg{width:100%;height:100%;display:block;overflow:visible;}

.pd-blob-1{width:96px;height:70px;top:4%;right:34%;color:var(--green);animation:pdBlobFloat1 8.5s ease-in-out infinite;}
.pd-blob-2{width:150px;height:190px;top:10%;right:16%;color:var(--navy);animation:pdBlobFloat2 11s ease-in-out infinite;}
.pd-blob-3{width:52px;height:66px;top:46%;right:38%;color:var(--blue);animation:pdBlobFloat3 7s ease-in-out infinite;}
.pd-blob-4{width:118px;height:150px;top:2%;right:2%;color:var(--tan);animation:pdBlobFloat4 9.5s ease-in-out infinite;}
.pd-blob-5{width:130px;height:150px;top:36%;right:8%;color:var(--olive);animation:pdBlobFloat2 12.5s ease-in-out infinite reverse;}
.pd-blob-6{width:110px;height:105px;top:58%;right:26%;color:var(--green-deep);animation:pdBlobFloat1 10s ease-in-out infinite reverse;}

@keyframes pdBlobFloat1{
  0%,100%{transform:translate3d(0,0,50px) rotate(-4deg) rotateY(0deg);}
  50%{transform:translate3d(-16px,20px,100px) rotate(3deg) rotateY(18deg);}
}
@keyframes pdBlobFloat2{
  0%,100%{transform:translate3d(0,0,20px) rotate(2deg) rotateX(0deg);}
  50%{transform:translate3d(12px,-22px,80px) rotate(-3deg) rotateX(14deg);}
}
@keyframes pdBlobFloat3{
  0%,100%{transform:translate3d(0,0,90px) rotate(0deg);}
  50%{transform:translate3d(-10px,16px,140px) rotate(-8deg);}
}
@keyframes pdBlobFloat4{
  0%,100%{transform:translate3d(0,0,-10px) rotate(3deg) rotateY(-6deg);}
  50%{transform:translate3d(18px,14px,40px) rotate(-2deg) rotateY(10deg);}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-392f55f *//* PetDriven — SECTION 2: INTRO ("We Know Pets. We Know Digital.")
   Requires the shared base/variables from petdriven-hero.css to already
   be loaded on the page (colors, fonts, .pd-wrap, .pd-eyebrow). */

.pd-intro{padding:100px 0;border-top:1px solid var(--line);}
.pd-intro-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start;}
.pd-intro h2{font-size:clamp(30px,4vw,46px);font-weight:700;line-height:1.08;}
.pd-intro h2 .pd-green{color:var(--green);}
.pd-intro-body p{font-size:16.5px;color:var(--ink-soft);margin-bottom:18px;max-width:560px;}

@media(max-width:900px){
  .pd-intro-grid{grid-template-columns:1fr;gap:36px;}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3890f38 *//* PetDriven — SECTION 3: "A Habitat for Every Vertical" (industry cards)
   Requires the shared base/variables from petdriven-hero.css to already
   be loaded on the page (colors, fonts, .pd-wrap, .pd-eyebrow). */

.pd-habitat{padding:110px 0;}

/* Shared section heading style — reused by later sections too,
   so only include this .pd-section-head block ONCE across your page. */
.pd-section-head{max-width:640px;margin-bottom:56px;}
.pd-section-head h2{font-size:clamp(32px,4.4vw,50px);font-weight:700;}
.pd-section-head h2 .pd-green{color:var(--green);}
.pd-section-head h2 .pd-blue{color:var(--blue);}

.pd-habitat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;perspective:1600px;}
.pd-hcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px 30px 32px;
  transform-style:preserve-3d;
  transition:transform .12s linear, box-shadow .3s var(--ease), border-color .3s;
  will-change:transform;
}
.pd-hcard:hover{box-shadow:0 34px 50px -28px rgba(32,36,31,.24);border-color:transparent;}
.pd-sphere{
  width:76px;height:76px;border-radius:50%;margin-bottom:22px;
  display:flex;align-items:center;justify-content:center;position:relative;
  transform:translateZ(30px);
  box-shadow:inset -8px -10px 18px rgba(0,0,0,.18), inset 6px 8px 14px rgba(255,255,255,.5), 0 14px 22px -10px rgba(32,36,31,.32);
}
.pd-sphere::after{content:'';position:absolute;top:10%;left:16%;width:34%;height:26%;border-radius:50%;background:radial-gradient(circle, rgba(255,255,255,.85), transparent 70%);}
.pd-sphere svg{width:38px;height:38px;position:relative;z-index:2;}
.pd-s-navy{background:radial-gradient(circle at 35% 30%, #4a5c70, var(--navy));}
.pd-s-green{background:radial-gradient(circle at 35% 30%, #7fab63, var(--green));}
.pd-s-blue{background:radial-gradient(circle at 35% 30%, #5f93c7, var(--blue));}
.pd-s-olive{background:radial-gradient(circle at 35% 30%, #d1cd8f, var(--olive));}
.pd-s-tan{background:radial-gradient(circle at 35% 30%, #d9ab72, var(--tan));}
.pd-s-gray{background:radial-gradient(circle at 35% 30%, #b3bcc2, var(--gray-cat));}
.pd-hcard h3{font-size:19.5px;font-weight:700;margin-bottom:10px;transform:translateZ(18px);}
.pd-hcard p{font-size:14.5px;color:var(--ink-soft);transform:translateZ(12px);}

@media(max-width:900px){
  .pd-habitat-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .pd-habitat-grid{grid-template-columns:1fr;}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-22af317 *//* PetDriven — SECTION 4: "The Service Command Center" (dark interactive tabs)
   Requires the shared base/variables from petdriven-hero.css, AND the
   .pd-section-head rules from petdriven-habitat.css, to already be
   loaded on the page. */

.pd-services{background:var(--navy);color:#fff;padding:120px 0;}
.pd-services .pd-section-head h2{color:#fff;}
.pd-services .pd-section-head h2 .pd-white2{color:#fff;opacity:.5;}
.pd-services .pd-eyebrow{color:var(--blue);}
.pd-services-layout{display:grid;grid-template-columns:340px 1fr;gap:0;border:1px solid var(--line-dark);border-radius:24px;overflow:hidden;}
.pd-svc-list{background:var(--panel);border-right:1px solid var(--line-dark);}
.pd-svc-item{
  display:flex;align-items:center;gap:14px;
  padding:19px 26px;font-family:'Sora';font-weight:600;font-size:14.5px;
  color:rgba(255,255,255,.6);cursor:pointer;
  border-bottom:1px solid var(--line-dark);
  transition:background .25s, color .25s, padding-left .25s;
  position:relative;
}
.pd-svc-item .pd-num{font-size:11px;color:rgba(255,255,255,.28);width:16px;}
.pd-svc-item:last-child{border-bottom:none;}
.pd-svc-item:hover{color:#fff;padding-left:32px;}
.pd-svc-item.pd-active{color:#fff;background:var(--panel-2);padding-left:32px;}
.pd-svc-item.pd-active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green);}
.pd-svc-panel{background:var(--panel-2);padding:52px 54px;perspective:1200px;}
.pd-svc-panel-inner{transform-style:preserve-3d;}
.pd-svc-panel h3{font-size:28px;font-weight:700;margin-bottom:14px;}
.pd-svc-panel h3 span{color:var(--green);}
.pd-svc-panel > p.pd-desc{color:rgba(255,255,255,.62);font-size:15.5px;max-width:560px;margin-bottom:28px;}
.pd-svc-cols{display:grid;grid-template-columns:1fr 1fr;gap:6px 40px;margin-bottom:34px;padding:0;}
.pd-svc-cols li{list-style:none;font-size:14.5px;color:rgba(255,255,255,.72);padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:10px;}
.pd-svc-cols li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);flex:none;}
.pd-fade-in{animation:pdFadeUp .45s var(--ease);}
@keyframes pdFadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

@media(max-width:900px){
  .pd-services-layout{grid-template-columns:1fr;}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4015afc *//* PetDriven — SECTION 5: "Understand. Create. Reach. Grow." (process steps)
   Requires the shared base/variables from petdriven-hero.css, AND the
   .pd-section-head rules from petdriven-habitat.css, to already be
   loaded on the page. No JS needed for this section. */

.pd-process{padding:120px 0;}
.pd-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:60px;}
.pd-p-step{padding-top:26px;border-top:1px solid var(--line);}
.pd-p-step .pd-idx{font-family:'Sora';font-weight:700;font-size:15px;color:var(--green);letter-spacing:.02em;}
.pd-p-step h4{font-size:19px;font-weight:700;margin:14px 0 10px;}
.pd-p-step p{font-size:14px;color:var(--ink-soft);}

@media(max-width:900px){
  .pd-process-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .pd-process-grid{grid-template-columns:1fr;}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fa14bd4 *//* PetDriven — SECTION 6: "Pet marketing isn't one market" (communities)
   Requires the shared base/variables from petdriven-hero.css to already
   be loaded on the page. Includes a two-row infinite auto-scrolling
   carousel of community chips (pauses on hover). */

.pd-communities{padding:110px 0;text-align:center;overflow:hidden;}
.pd-communities h2{font-size:clamp(30px,4.6vw,48px);font-weight:700;max-width:820px;margin:0 auto;line-height:1.14;}
.pd-communities h2 .pd-green{color:var(--green);}

/* ---- Carousel ---- */
.pd-carousel-wrap{margin-top:46px;display:flex;flex-direction:column;gap:16px;}
.pd-carousel-row{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.pd-carousel-track{
  display:flex;align-items:center;gap:12px;width:max-content;
  animation:pdMarqueeLeft 26s linear infinite;
}
.pd-carousel-row.pd-carousel-right .pd-carousel-track{animation-name:pdMarqueeRight3;animation-duration:24s;}
.pd-carousel-row:hover .pd-carousel-track{animation-play-state:paused;}

@keyframes pdMarqueeLeft{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
@keyframes pdMarqueeRight3{from{transform:translate3d(-33.334%,0,0);}to{transform:translate3d(0,0,0);}}

.pd-chip{
  flex:none;
  padding:10px 20px;border:1px solid var(--line);border-radius:999px;background:var(--cream);
  font-size:13.5px;font-weight:500;color:var(--ink-soft);white-space:nowrap;
  transition:transform .3s var(--ease), border-color .3s, color .3s, background .3s, box-shadow .3s;
}
.pd-chip:hover{
  transform:perspective(500px) translateY(-5px) rotateX(10deg) scale(1.04);
  background:var(--navy);color:#fff;border-color:var(--navy);
  box-shadow:0 14px 22px -10px rgba(38,52,68,.4);
}

.pd-quote-box{max-width:600px;margin:56px auto 0;padding:30px 36px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;}
.pd-quote-box p{font-size:15px;color:var(--ink-soft);}
.pd-quote-box strong{display:block;color:var(--green);font-weight:600;margin-top:8px;}

@media(max-width:560px){
  .pd-carousel-track{animation-duration:18s;}
  .pd-carousel-row.pd-carousel-right .pd-carousel-track{animation-duration:16s;}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5a74833 *//* PetDriven — SECTION 7: "Who We Work With" (dark strip)
   Requires the shared base/variables from petdriven-hero.css to already
   be loaded on the page. Single continuous infinite marquee row with
   dot separators, per-item 3D hover pop, pauses on hover. */

.pd-whowork{background:var(--navy);color:#fff;padding:90px 0;text-align:center;overflow:hidden;}
.pd-whowork .pd-eyebrow{color:var(--blue);justify-content:center;}
.pd-whowork h2{font-size:clamp(26px,3.6vw,38px);font-weight:700;max-width:640px;margin:0 auto 40px;}

.pd-who-carousel{
  overflow:hidden;perspective:800px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.pd-who-track{
  display:flex;align-items:center;gap:0;width:max-content;
  animation:pdWhoMarquee 34s linear infinite;
}
.pd-who-carousel:hover .pd-who-track{animation-play-state:paused;}

@keyframes pdWhoMarquee{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}

.pd-who-item{
  flex:none;display:flex;align-items:center;
  font-size:14.5px;color:rgba(255,255,255,.68);white-space:nowrap;
  transition:color .25s var(--ease), transform .25s var(--ease);
  transform-style:preserve-3d;
}
.pd-who-item:hover{color:#fff;transform:translateY(-3px) rotateX(10deg) scale(1.05);}
.pd-who-item .pd-dot{margin:0 16px;color:rgba(255,255,255,.28);transition:color .25s;}
.pd-who-item:hover .pd-dot{color:var(--green);}

@media(max-width:560px){
  .pd-who-track{animation-duration:22s;}
  .pd-who-item{font-size:13px;}
  .pd-who-item .pd-dot{margin:0 10px;}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-42006f4 *//* PetDriven — SECTION 8: "Let's Grow Your Pet Business" (orange CTA band)
   Requires the shared base/variables from petdriven-hero.css to already
   be loaded on the page. Adds a few soft, slow-drifting 3D shapes behind
   the text for subtle depth. */

.pd-cta{background:var(--green);padding:110px 0;text-align:center;overflow:hidden;position:relative;perspective:1200px;}
.pd-cta h2{position:relative;z-index:2;font-size:clamp(30px,4.8vw,52px);font-weight:700;color:#fff;max-width:640px;margin:0 auto;line-height:1.1;}
.pd-cta p{position:relative;z-index:2;color:rgba(255,255,255,.85);max-width:480px;margin:22px auto 0;font-size:16px;}
.pd-cta .pd-btn{position:relative;z-index:2;margin-top:34px;
}
.pd-cta .pd-btn-dark:hover{box-shadow:0 16px 30px -12px rgba(0,0,0,.4);}

.pd-cta-blob-field{position:absolute;inset:0;z-index:1;transform-style:preserve-3d;pointer-events:none;}
.pd-cta-blob{position:absolute;border-radius:50%;filter:blur(2px);}
.pd-cta-a{width:320px;height:320px;top:-18%;left:6%;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), transparent 70%);animation:pdCtaDrift1 16s ease-in-out infinite;}
.pd-cta-b{width:220px;height:220px;bottom:-14%;right:10%;background:radial-gradient(circle at 35% 30%, rgba(38,52,68,.18), transparent 70%);animation:pdCtaDrift2 13s ease-in-out infinite;}
.pd-cta-c{width:160px;height:160px;top:20%;right:22%;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.12), transparent 70%);animation:pdCtaDrift3 10s ease-in-out infinite;}

@keyframes pdCtaDrift1{0%,100%{transform:translate3d(0,0,0) rotate(0deg);}50%{transform:translate3d(24px,18px,60px) rotate(10deg);}}
@keyframes pdCtaDrift2{0%,100%{transform:translate3d(0,0,20px) rotate(0deg);}50%{transform:translate3d(-20px,-16px,70px) rotate(-8deg);}}
@keyframes pdCtaDrift3{0%,100%{transform:translate3d(0,0,40px);}50%{transform:translate3d(-14px,20px,90px);}}

.pd-btn-dark {
	color: #fff !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-478bcde *//* PetDriven — SECTION 9: Contact (info column + Elementor form template)
   Requires the shared base/variables from petdriven-hero.css to already
   be loaded on the page. */

.pd-contact{padding:120px 0;}
.pd-contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start;}
.pd-contact h2{font-size:clamp(30px,4.2vw,46px);font-weight:700;line-height:1.1;margin-bottom:18px;}
.pd-contact h2 .pd-green{color:var(--green);}
.pd-contact-info{display:flex;flex-direction:column;gap:22px;margin-top:32px;}
.pd-info-row{display:flex;align-items:center;gap:16px;}
.pd-info-icon{width:42px;height:42px;border-radius:50%;background:var(--cream-2);display:flex;align-items:center;justify-content:center;flex:none;}
.pd-info-icon svg{width:19px;height:19px;color:var(--green);}
.pd-info-row .pd-label{font-size:11.5px;color:var(--ink-faint);font-weight:600;letter-spacing:.03em;}
.pd-info-row .pd-val{font-family:'Sora';font-weight:600;font-size:15.5px;color:var(--ink);text-decoration:none;transition:color .2s;}
a.pd-info-row .pd-val,
.pd-info-row a.pd-val{display:inline-block;}
.pd-info-row a.pd-val:hover{color:var(--green);}

/* Card wrapper around the embedded Elementor form template — keeps the
   same 3D-tilt, rounded, shadowed look the rest of the design uses,
   regardless of what form fields the template itself contains. */
.pd-form-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:44px;perspective:1000px;transform-style:preserve-3d;transition:transform .1s linear;
  box-shadow:0 40px 70px -40px rgba(32,36,31,.22);
}

@media(max-width:900px){
  .pd-contact-grid{grid-template-columns:1fr;gap:36px;}
}/* End custom CSS */