/* ============================================================
   PDR Estimating Solutions — theme styles
   Token contract extracted from Figma. Client-approved dark direction.
   WCAG-AA enforced. 8px spacing scale. Reduced-motion safe.
   ============================================================ */
:root{
  --pdr-bg:#020A16; --pdr-bg-2:#0B203A; --pdr-surface:#0E1B2E; --pdr-surface-2:#13243B;
  --pdr-line:rgba(255,255,255,.10); --pdr-accent:#0079E4; --pdr-accent-hover:#1f8bf0;
  --pdr-text:#FAFBFB; --pdr-muted:rgba(250,251,251,.70); --pdr-star:#F5A623; --pdr-error:#EF4444;
  --ui-card:#FFFFFF; --ui-panel:#F7F8FA; --ui-line:#E6EAF0; --ui-text:#0F172A;
  --ui-muted:#64748B; --ui-accent-text:#0A63B8; --ui-success:#15803D;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s8:64px;--s10:80px;--s12:96px;
  --maxw:1200px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:var(--font);background:var(--pdr-bg);color:var(--pdr-text);
  -webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:clip;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;height:auto;}
h1,h2,h3,h4,h5{margin:0;line-height:1.15;}
ul{margin:0;padding:0;list-style:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s5);}
main{display:block;}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:var(--s1);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;font-size:14px;padding:14px 28px;border-radius:8px;cursor:pointer;white-space:nowrap;
  border:1px solid transparent;transition:background .18s ease,transform .18s ease,border-color .18s ease;}
.btn-primary{background:var(--pdr-accent);color:#fff;}
.btn-primary:hover{background:var(--pdr-accent-hover);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--pdr-text);border-color:var(--pdr-line);}
.btn-ghost:hover{border-color:var(--pdr-accent);transform:translateY(-1px);}
.btn:focus-visible{outline:3px solid #9ecbff;outline-offset:2px;}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(2,10,22,.86);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--pdr-line);animation:headerDrop .5s ease both;}
.admin-bar .site-header{top:32px;}
@media (max-width:782px){.admin-bar .site-header{top:46px;}}
@keyframes headerDrop{from{transform:translateY(-8px);opacity:.6;}to{transform:translateY(0);opacity:1;box-shadow:0 6px 24px rgba(0,0,0,.35);}}
.hdr-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  height:100px;max-width:var(--maxw);margin:0 auto;padding:0 var(--s5);position:relative;}
.brand{display:flex;flex-direction:column;line-height:1;font-weight:800;letter-spacing:.06em;}
.brand .b1{font-size:20px;}
.brand .b2{font-size:9px;letter-spacing:.34em;color:var(--pdr-muted);margin-top:3px;}
.brand-img{max-height:80px;width:auto;align-self:flex-start;}
.nav{display:flex;gap:22px;align-items:center;}
.nav li{list-style:none;}
.nav a{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--pdr-muted);
  white-space:nowrap;transition:color .15s ease;}
.nav a:hover,.nav .current-menu-item>a,.nav a.active{color:var(--pdr-text);}
.menu-toggle{display:none;background:none;border:0;color:var(--pdr-text);font-size:24px;cursor:pointer;line-height:1;}

/* Sections + headings — one tight, consistent rhythm */
section{padding:32px 0;}
.eyebrow{color:var(--pdr-accent);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:14px;}
.section-title{font-size:clamp(28px,3.4vw,36px);font-weight:800;text-align:center;text-transform:uppercase;}
.section-title .accent{color:var(--pdr-text);}
.section-head{margin-bottom:var(--s3);}
.accent{color:var(--pdr-accent);}

/* Hero / About hero */
.hero{background:var(--pdr-bg);background-image:radial-gradient(55% 65% at 88% -10%, rgba(15,45,75,.50), transparent 62%);}
.about-hero{background:var(--pdr-bg);background-image:radial-gradient(55% 65% at 85% 0%, rgba(15,45,75,.45), transparent 60%);}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s5);align-items:center;}
.hero h1{font-size:clamp(30px,4.2vw,48px);font-weight:800;line-height:1.06;margin-bottom:var(--s3);text-transform:uppercase;}
.hero h1 span{display:block;white-space:nowrap;}
.hero h1 .accent{display:block;}
.hero p{color:var(--pdr-muted);font-size:18px;max-width:46ch;margin:0 0 var(--s5);}
.hero-actions{display:flex;gap:var(--s2);flex-wrap:wrap;}
.hero-media{border-radius:18px;}
/* v1.11.1 - the default iPhone portal mockup (portrait): cap height, center, no stretch. */
.hero-media-default{max-height:620px;width:auto;max-width:100%;display:block;margin:0 auto;}

/* v1.15.0 (#519627282) — the .device / .mini-tile hand-built dashboard mockup was
   removed from hero.php. It rendered invented figures (Open Requests 2 /
   Completed 14) on About, Terms and Privacy, the same kind of fake dashboard Kyle
   rejected on the home page. Markup and styles both deleted; the home hero's
   client-approved iPhone image and any real ACF hero image are unaffected.

   A hero or story with no visual now collapses to ONE full-width column instead of
   leaving an empty grid cell, so the copy reflows into the space. max-width keeps
   the line length readable rather than letting it run the full 1200px container. */
/* v1.15.2 — these are qualified with .wrap (both grids carry it) purely to WIN ON
   SPECIFICITY rather than source order. v1.15.1 collapsed the hero correctly but not
   the story, because .story-grid is declared at line ~253, AFTER this block, at equal
   specificity — so it kept reinstating the second column and the story text stayed at
   540px inside a 1160px row. That leftover empty column is what the client was still
   seeing and reporting as "the empty box". Specificity makes it order-proof, so moving
   this block or adding a rule later cannot quietly reintroduce the bug. */
.wrap.hero-grid-solo,.wrap.story-grid-solo{grid-template-columns:minmax(0,1fr);}
/* v1.15.1 (#519627282) — the text must run the FULL container width, not just lose
   its neighbour. v1.15.0 removed the empty image boxes but left the copy inside its
   original narrow column (a 72ch cap here, plus the inherited .hero p 46ch and
   .story p 50ch caps), which left ~620px of blank space to the right at 1200px and
   still read to the client as "the empty box is still there". Kyle asked twice, in
   his own words, for full page width. The caps existed for line-length comfort; at
   1200px this runs long, and the trade was explained to him rather than quietly
   overruled. Only the SOLO variants are affected, so any hero or story that still
   has an image beside it keeps its original measure. */
.wrap.hero-grid-solo > div,.wrap.story-grid-solo > div{max-width:none;}
.wrap.hero-grid-solo p,.wrap.story-grid-solo p{max-width:none;}

/* How it works (video CTA) */
.howto-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:var(--s5);align-items:center;}
.howto h2{font-size:clamp(26px,3vw,34px);font-weight:800;margin-bottom:var(--s2);}
.howto p{color:var(--pdr-muted);font-size:17px;margin:0 0 var(--s4);}
.video-card{position:relative;aspect-ratio:16/9;border-radius:14px;border:1px solid var(--pdr-line);
  background:linear-gradient(135deg,#0c1a2c,#06101d);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.video-card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.video-card .logo{font-weight:800;letter-spacing:.1em;opacity:.5;font-size:28px;}
/* v1.16.2 — margin:auto so the logo centres on its own rather than depending on the
   card being display:flex. Same root cause as the play badge: v1.16.0's display:block
   reset knocked both out of centre, and the logo drifted left. */
.video-card .video-logo{position:relative;inset:auto;width:auto;height:auto;margin:auto;
  max-width:58%;max-height:62%;object-fit:contain;opacity:.92;}
/* v1.16.2 — the play badge is centred by its OWN offsets, not by the parent's flex.
   It used to rely on .video-card being display:flex, so when v1.16.0 reset the card to
   display:block to strip the UA button chrome, the badge dropped out of centre. Pinning
   it to 50/50 with a translate means no future change to the card's display can move it. */
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;background:var(--pdr-accent);
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,121,228,.5);}
/* v1.16.0 (#519129708) — the video card is now a real <button> that loads the player
   on click. Reset the UA button chrome so it looks identical to the old div, and give
   it the affordances a control needs: pointer cursor, hover lift on the play badge,
   and a visible keyboard focus ring (it was a role="img" div before, so keyboard users
   could not reach it at all). */
button.video-card{appearance:none;-webkit-appearance:none;border:1px solid var(--pdr-line);
  padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;width:100%;
  /* NOT display:block — the card's flex centring is what positions the logo fallback. */
  display:flex;align-items:center;justify-content:center;}
button.video-card:focus-visible{outline:3px solid #9ecbff;outline-offset:3px;}
/* Compose with the centring translate; a bare scale() would replace it and shove the
   badge back into the corner, which is the bug this version exists to fix. */
button.video-card:hover .play,button.video-card:focus-visible .play{transform:translate(-50%,-50%) scale(1.06);}
.video-card .play{transition:transform .18s ease;}
/* The swapped-in iframe fills the same 16/9 box, so nothing shifts when it loads. */
.video-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.play::before{content:"";border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px;}

/* Features (Why choose us / Mission) */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);text-align:center;}
.feature .ico,.mf .ico{width:64px;height:64px;border-radius:50%;border:2px solid var(--pdr-accent);
  display:flex;align-items:center;justify-content:center;margin:0 auto var(--s2);color:var(--pdr-accent);}
.feature h4{font-size:18px;font-weight:700;margin-bottom:var(--s1);}
.feature p{color:var(--pdr-muted);font-size:15px;margin:0;}
.mission-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:var(--s5);align-items:start;}
.mission h2{font-size:clamp(26px,3vw,34px);font-weight:800;margin-bottom:var(--s3);}
.mission .lede{color:var(--pdr-muted);font-size:17px;margin:0;}
.mission-features{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);}
.mf{text-align:left;}
.mf .ico{margin:0 0 var(--s2);}
.mf h4{font-size:16px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;margin-bottom:var(--s1);}
.mf p{color:var(--pdr-muted);font-size:15px;margin:0;}

/* Pricing — reverse pyramid: 3 on top, remaining 2 centered below. */
.price-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);align-items:stretch;}
.price-card{flex:0 0 calc((100% - 2*var(--s3))/3);max-width:calc((100% - 2*var(--s3))/3);
  background:var(--pdr-surface);border:1px solid var(--pdr-line);border-radius:16px;
  padding:var(--s5) var(--s4);text-align:center;position:relative;display:flex;flex-direction:column;}
.price-card.popular{border-color:var(--pdr-accent);box-shadow:0 0 0 1px var(--pdr-accent),0 20px 50px rgba(0,121,228,.18);}
.pop-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--pdr-accent);
  color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:999px;}
.price-card .name{font-size:18px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--s2);}
.price-card .price{font-size:48px;font-weight:800;line-height:1;}
.price-card .per{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--pdr-muted);margin-top:var(--s1);}
.price-card ul{margin:var(--s4) 0;display:grid;gap:12px;text-align:left;}
.price-card li{display:flex;gap:10px;align-items:center;font-size:15px;}
.price-card li svg{flex:0 0 auto;color:var(--pdr-accent);}
.price-card .btn{width:100%;justify-content:center;margin-top:auto;}
.price-note{text-align:center;margin-top:var(--s5);color:var(--pdr-accent);font-weight:600;
  display:flex;gap:10px;align-items:center;justify-content:center;font-size:15px;}

/* Services page — the plugin's [swgef_services] pricing block adopts the dark
   Plans-card look (Basecamp #519173306: merge Plans design into Services). The
   plugin ships a LIGHT default (its brand rule); PDR's client-approved dark
   direction lives here in the theme. Every pricing element reads --swg-* tokens,
   so ONE redefine flips the whole block — cards, text, borders, the CTA button
   and the bulk-purchase controls — with the purchasing functionality untouched.
   `body` prefix guarantees the win over the plugin's own token defaults whatever
   the stylesheet load order. Values mirror the .price-card design above. */
body .swgef-fe-root.swgef-fe-pricing{
  --swg-bg:#0E1B2E;                     /* card background = .price-card (--pdr-surface) */
  --swg-surface:#13243B;                /* qty input + "Coming Soon" bg (--pdr-surface-2) */
  --swg-surface-hover:#16294a;
  --swg-line:rgba(255,255,255,.10);     /* --pdr-line */
  --swg-text:#FAFBFB;                   /* --pdr-text */
  --swg-body:rgba(250,251,251,.92);
  --swg-muted:rgba(250,251,251,.70);    /* --pdr-muted */
  --swg-accent:#0079E4;                 /* check icons, shield (--pdr-accent) */
  --swg-accent-soft:rgba(0,121,228,.16);
  --swg-accent-dark:#0079E4;            /* CTA button background, white text */
  --swg-shadow-sm:none;
  --swg-shadow-lg:0 20px 50px rgba(0,0,0,.45);
}
/* Match the Plans .price-card padding + radius exactly. */
body .swgef-fe-root .swgef-fe-pricing-card{padding:var(--s5) var(--s4);border-radius:16px;}
/* CTA hover mirrors .btn-primary:hover (lighter blue), not the plugin's dark hover. */
body .swgef-fe-root.swgef-fe-pricing .swgef-fe-button-primary:hover,
body .swgef-fe-root.swgef-fe-pricing .swgef-fe-button-primary:focus{background:var(--pdr-accent-hover);}

/* Content pages (FAQ, etc.) — block content rendered via the page.php fallback. */
.content-page .section-title{margin-bottom:var(--s6);}
.content-body{max-width:860px;margin:0 auto;}
.content-body > *{margin-bottom:var(--s3);}
.content-body > *:last-child{margin-bottom:0;}
.content-body h2,.content-body h3{color:var(--pdr-text);margin:var(--s6) 0 var(--s2);}
.content-body p{color:var(--pdr-muted);}
.content-body a{color:var(--pdr-accent);}

/* Contact details card (v1.14.0, #519556812) — sits above the contact form.
   Full perimeter border per the brand rule (never a single-edge accent stripe).
   Link colour is the lighter accent-hover so it clears AA on the dark surface:
   #1f8bf0 on #0E1B2E measures 4.95:1, where --pdr-accent (#0079E4) is only 4.0:1
   and would miss the 4.5:1 body-text threshold. */
.contact-details{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);
  margin:0 0 var(--s6);}
.contact-details .cd-item{background:var(--pdr-surface);border:1px solid var(--pdr-line);
  border-radius:12px;padding:var(--s3);}
.contact-details h3{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pdr-muted);margin:0 0 var(--s1);}
.contact-details p{color:var(--pdr-text);font-size:16px;margin:0;line-height:1.5;}
/* v1.14.3 — the email and phone are the highest-intent taps on this page, and as
   inline anchors in a 16px/1.5 paragraph their hit box was only 24px tall, under the
   agency's 44px minimum. inline-flex + min-height gives a full 44px target without
   changing how the text reads. */
.contact-details a{color:var(--pdr-accent-hover);text-decoration:none;overflow-wrap:anywhere;
  display:inline-flex;align-items:center;min-height:44px;}
.contact-details a:hover,.contact-details a:focus-visible{text-decoration:underline;}
.contact-details a:focus-visible{outline:2px solid var(--pdr-accent-hover);outline-offset:3px;border-radius:4px;}
@media (max-width:900px){
  .contact-details{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  .contact-details{grid-template-columns:1fr;}
}

/* Portal / Dashboard */
.portal{background:var(--pdr-bg);background-image:radial-gradient(55% 65% at 85% 10%, rgba(15,45,75,.42), transparent 60%);}
.portal-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:var(--s5);align-items:center;}
.portal h2{font-size:clamp(30px,3.6vw,42px);font-weight:800;line-height:1.05;margin:var(--s2) 0;}
.portal h2 .accent{display:block;}
.portal .lede{color:var(--pdr-muted);font-size:18px;margin:0 0 var(--s4);max-width:38ch;}
.checklist{display:grid;gap:var(--s2);margin:0 0 var(--s5);}
.checklist li{display:flex;align-items:center;gap:var(--s2);font-size:16px;}
.checklist svg{flex:0 0 auto;color:var(--pdr-accent);}
/* v1.14.0 (#519023440) — the portal preview is now the real tablet screenshot the
   client supplied, so the hand-built .mockup / .mk-* / .tile / .pill mockup styles
   that only that markup used were retired with it. The device frame is baked into
   the image, so all this needs is a soft drop shadow to seat it on the dark band.
   The screenshot has an OPAQUE WHITE background (it is a photo, not a cut-out), so
   the corners are rounded to make that white plate read as a deliberate card rather
   than a hard rectangle floating on the navy. The shadow stays a filter (not
   box-shadow) so it follows the rounded edge. */
.portal-shot{display:block;width:100%;height:auto;max-width:100%;border-radius:12px;
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.45));}

/* Testimonials */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);}
.tst-card{background:var(--pdr-surface);border:1px solid var(--pdr-line);border-radius:14px;padding:var(--s4);}
.tst-card .quote{font-style:italic;font-size:16px;margin:0 0 var(--s3);}
.tst-card .who{font-weight:700;}
.tst-card .shop{color:var(--pdr-muted);font-size:14px;margin-bottom:var(--s2);}
.tst-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;display:block;margin:0 0 var(--s2);border:2px solid var(--pdr-line);}
.stars{color:var(--pdr-star);letter-spacing:3px;}
.tst-cta{text-align:center;margin-top:var(--s5);}

/* Team / Stats */
.team{text-align:center;}
.team .sub{color:var(--pdr-muted);font-size:17px;max-width:62ch;margin:var(--s2) auto var(--s5);}
.team-photo{aspect-ratio:21/9;border-radius:16px;border:1px solid var(--pdr-line);
  overflow:hidden;margin-bottom:var(--s8);}
.team-photo img{width:100%;height:100%;object-fit:cover;}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);}
.stat .num{font-size:40px;font-weight:800;color:var(--pdr-accent);}
.stat h4{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin:var(--s1) 0;}
.stat p{color:var(--pdr-muted);font-size:14px;margin:0;}

/* Our Story */
.story{background:var(--pdr-bg);background-image:radial-gradient(50% 65% at 90% 50%, rgba(15,45,75,.40), transparent 60%);
  border-top:1px solid var(--pdr-line);border-bottom:1px solid var(--pdr-line);}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);align-items:center;}
.story h2{font-size:clamp(26px,3.2vw,36px);font-weight:800;line-height:1.06;margin:var(--s2) 0 var(--s3);text-transform:uppercase;}
.story h2 .accent{display:block;}
.story p{color:var(--pdr-muted);font-size:16px;margin:0 0 var(--s3);max-width:50ch;}
/* v1.15.0 — the empty-state gradient + placeholder-text styling is gone: these
   panels are only rendered when a REAL image is set (see story.php/stats_team.php),
   so they never again show the words "Dashboard on Tablet" or "Team Photo". */
.tablet{aspect-ratio:4/3;border-radius:14px;border:1px solid var(--pdr-line);overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.45);}
.tablet img{width:100%;height:100%;object-fit:cover;}

/* CTA band */
.cta-band{text-align:center;background-image:linear-gradient(rgba(2,10,22,.78),rgba(2,10,22,.86)),var(--cta-bg,linear-gradient(120deg,#1a2a3d,#0a1422));
  background-size:cover;background-position:center;border-top:1px solid var(--pdr-line);border-bottom:1px solid var(--pdr-line);}
.cta-band h2{font-size:clamp(28px,3.4vw,38px);font-weight:800;margin-bottom:var(--s2);}
.cta-band p{color:var(--pdr-muted);font-size:18px;max-width:60ch;margin:0 auto var(--s4);}

/* Footer */
.site-footer{background:#020912;border-top:1px solid var(--pdr-line);padding:var(--s8) 0 var(--s2);}
.site-footer .brand-img{max-height:64px;}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s5);}
.ft-blurb{color:var(--pdr-muted);font-size:14px;margin-top:var(--s2);max-width:34ch;}
.ft-col h5{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--pdr-accent);margin:0 0 var(--s2);}
.ft-col ul{display:grid;gap:10px;}
.ft-col a,.ft-col li{color:var(--pdr-muted);font-size:14px;}
.ft-col a:hover{color:var(--pdr-text);}
.ft-social{display:flex;gap:10px;}
.ft-social a{width:36px;height:36px;border-radius:50%;background:var(--pdr-accent);display:flex;align-items:center;justify-content:center;color:#fff;}
.ft-social svg{width:18px;height:18px;display:block;}
.ft-bottom{border-top:1px solid var(--pdr-line);margin-top:var(--s5);padding-top:var(--s3);color:var(--pdr-muted);font-size:12px;text-align:center;}
.ft-bottom a{color:var(--pdr-muted);}

/* Scroll-in reveal (play once) */
html.js-reveal .reveal{opacity:0;transform:translateY(24px);}
html.js-reveal .reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.22,1.2,.36,1);}

/* Responsive */
/* Nav collapses to hamburger early — before the logo + 9 links + Client Login can crowd/clip. */
@media (max-width:1180px){
  .nav,.hdr-cta{display:none;}
  .menu-toggle{display:block;}
  .site-header.nav-open .nav{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);
    position:absolute;top:100px;left:0;right:0;background:var(--pdr-bg-2);padding:var(--s3) var(--s5) var(--s4);
    border-bottom:1px solid var(--pdr-line);box-shadow:0 20px 40px rgba(0,0,0,.4);}
  .site-header.nav-open .hdr-cta{display:inline-flex;position:absolute;top:30px;right:64px;padding:8px 16px;}
}
@media (max-width:960px){
  .hero-grid,.howto-grid,.portal-grid,.mission-grid,.story-grid{grid-template-columns:1fr;gap:var(--s5);}
  .feature-grid,.stats{grid-template-columns:1fr 1fr;gap:var(--s5);}
  .price-card{flex-basis:calc((100% - var(--s3))/2);max-width:calc((100% - var(--s3))/2);}
  .tst-grid{grid-template-columns:1fr;}
  .ft-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .brand-img{max-height:52px;}
  .price-card{flex-basis:100%;max-width:100%;}
  .hdr-inner{height:72px;}
  .site-header.nav-open .nav{top:72px;}
  .site-header.nav-open .hdr-cta{top:18px;}
}
@media (max-width:480px){
  .wrap{padding:0 var(--s3);}
  section{padding:var(--s8) 0;}
  .feature-grid,.mission-features,.stats,.ft-grid{grid-template-columns:1fr;}
  .portal-shot{filter:drop-shadow(0 14px 30px rgba(0,0,0,.4));}
  .hero-actions .btn,.price-card .btn,.about-hero .btn{width:100%;justify-content:center;}
  .btn{min-height:44px;}
}
@media (prefers-reduced-motion:reduce){
  .site-header{animation:none;}
  .btn,.btn:hover{transition:none;transform:none;}
  html.js-reveal .reveal{opacity:1;transform:none;}
  html.js-reveal .reveal.in{transition:none;}
}

/* ===== Blog (SWG default structure) ===== */
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 var(--s5);}
.blog-main,.single-main{padding:var(--s5) 0 var(--s8);}
.blog-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4);}
.blog-title{font-size:clamp(30px,4vw,44px);font-weight:800;}
.blog-search{display:flex;gap:8px;}
.blog-search input{background:var(--pdr-surface);border:1px solid var(--pdr-line);color:var(--pdr-text);border-radius:8px;padding:10px 14px;min-width:220px;font-size:15px;}
.blog-search input::placeholder{color:var(--pdr-muted);}
.blog-search input:focus{outline:none;border-color:var(--pdr-accent);}
.newsletter{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  background:var(--pdr-surface);border:1px solid var(--pdr-line);border-radius:14px;padding:var(--s4);margin-bottom:var(--s5);}
.newsletter h3{font-size:20px;font-weight:700;margin-bottom:4px;}
.newsletter p{color:var(--pdr-muted);font-size:14px;margin:0;}
.nl-form{display:flex;gap:8px;flex:1;min-width:280px;max-width:440px;}
.nl-form input{flex:1;background:var(--pdr-bg);border:1px solid var(--pdr-line);color:var(--pdr-text);border-radius:8px;padding:12px 14px;font-size:15px;}
.nl-form input::placeholder{color:var(--pdr-muted);}
.nl-form input:focus{outline:none;border-color:var(--pdr-accent);}
.blog-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s5);align-items:start;}
.blog-sidebar .sidebar-title{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--pdr-accent);margin-bottom:var(--s2);}
.cat-list{display:grid;gap:8px;list-style:none;}
.cat-list li{font-size:14px;}
.cat-list a{color:var(--pdr-muted);}
.cat-list a:hover{color:var(--pdr-text);}
.blog-featured{margin-bottom:var(--s4);}
.bf-banner{display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--pdr-line);
  background:linear-gradient(135deg,#10243a,#06121f);margin-bottom:var(--s3);}
.bf-banner img{width:100%;height:100%;object-fit:cover;display:block;}
.bf-title{font-size:clamp(22px,2.6vw,30px);font-weight:800;line-height:1.2;margin-bottom:8px;}
.bf-title a:hover,.br-title a:hover{color:var(--pdr-accent);}
.bf-byline,.br-meta{color:var(--pdr-muted);font-size:13px;margin-bottom:8px;}
.bf-cats,.single-cats{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--s2);}
.bf-cats a,.single-cats a{color:var(--pdr-accent);}
.bf-excerpt{color:var(--pdr-muted);font-size:16px;margin-bottom:var(--s2);}
.bf-more{color:var(--pdr-accent);font-weight:600;}
.recent-title{font-size:18px;font-weight:700;margin:var(--s4) 0 var(--s3);padding-top:var(--s3);border-top:1px solid var(--pdr-line);}
.blog-row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:var(--s3);margin-bottom:var(--s3);}
.br-thumb{display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid var(--pdr-line);
  background:linear-gradient(135deg,#10243a,#06121f);}
.br-thumb img{width:100%;height:100%;object-fit:cover;}
.br-title{font-size:18px;font-weight:700;line-height:1.25;margin-bottom:4px;}
.br-excerpt{color:var(--pdr-muted);font-size:14px;margin:6px 0 0;}
.pagination .page-numbers,.blog-posts .nav-links a,.blog-posts .nav-links span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;
  border:1px solid var(--pdr-line);border-radius:8px;color:var(--pdr-text);font-size:14px;margin-right:6px;}
.pagination .current,.blog-posts .nav-links .current{background:var(--pdr-accent);border-color:var(--pdr-accent);color:#fff;}
.blog-posts .pagination{margin-top:var(--s5);}
.blog-empty{color:var(--pdr-muted);}
.single-title{font-size:clamp(28px,3.6vw,42px);font-weight:800;line-height:1.15;margin:8px 0;}
.single-byline{color:var(--pdr-muted);font-size:14px;margin-bottom:var(--s4);}
.single-banner{aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--pdr-line);margin-bottom:var(--s4);}
.single-banner img{width:100%;height:100%;object-fit:cover;}
.single-content{font-size:17px;line-height:1.7;}
.single-content p{margin:0 0 var(--s3);}
.single-content h2{font-size:26px;font-weight:700;margin:var(--s4) 0 var(--s2);}
.single-content a{color:var(--pdr-accent);text-decoration:underline;}
.author-box{display:flex;gap:var(--s3);align-items:flex-start;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--pdr-line);}
.ab-avatar img{border-radius:50%;}
.ab-name{font-weight:700;}
.ab-bio{color:var(--pdr-muted);font-size:14px;margin:4px 0 0;}
@media (max-width:760px){
  .blog-grid{grid-template-columns:1fr;}
  .blog-sidebar{order:2;border-top:1px solid var(--pdr-line);padding-top:var(--s3);}
  .blog-row{grid-template-columns:96px minmax(0,1fr);}
  .newsletter{flex-direction:column;align-items:stretch;}
  .nl-form{max-width:none;}
  .blog-search{width:100%;}
  .blog-search input{min-width:0;flex:1;}
}

/* =========================================================================
   WooCommerce — dress WC pages (checkout / cart / my-account) in the theme.
   The theme had no WC integration, so WC pages rendered full-bleed +
   unstyled. Container + dark-theme styling, scoped to WC body classes.
   ========================================================================= */
/* Container + gutter on every WooCommerce page (was full-bleed → ran to edge). */
body.woocommerce-page main,
body.woocommerce-account main,
body.woocommerce-checkout main,
body.woocommerce-cart main{ max-width:var(--maxw); margin:0 auto; padding:var(--s8) var(--s5) var(--s10); }
.woocommerce-page h1,.woocommerce-page h2{ margin:0 0 var(--s3); }
.woocommerce-page .woocommerce{ color:var(--pdr-text); }

/* Buttons → theme cobalt (matches .btn-primary) */
.woocommerce-page .button,
.woocommerce-page button.button,
.woocommerce-page input[type=submit],
.woocommerce-page .woocommerce-Button,
.woocommerce-page a.button{
  display:inline-block; background:var(--pdr-accent); color:#fff; border:0; border-radius:8px;
  padding:13px 24px; font-weight:600; font-size:15px; line-height:1; cursor:pointer; text-decoration:none; text-transform:none; }
.woocommerce-page .button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input[type=submit]:hover,
.woocommerce-page a.button:hover{ background:var(--pdr-accent-hover); }
/* WC's default .button.alt is purple (#a46497) and its selector outranks the rules above — force cobalt. */
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt,
.woocommerce-page input.button.alt,
.woocommerce-page #place_order{ background:var(--pdr-accent); color:#fff; }
.woocommerce-page a.button.alt:hover,
.woocommerce-page button.button.alt:hover,
.woocommerce-page input.button.alt:hover,
.woocommerce-page #place_order:hover{ background:var(--pdr-accent-hover); }

/* Form fields — constrain width, dark-theme labels, white inputs */
.woocommerce-page form .form-row{ margin:0 0 var(--s3); }
.woocommerce-page label{ display:block; color:var(--pdr-text); font-size:14px; font-weight:600; margin:0 0 6px; }
.woocommerce-page input.input-text,
.woocommerce-page input[type=text],
.woocommerce-page input[type=email],
.woocommerce-page input[type=tel],
.woocommerce-page input[type=password],
.woocommerce-page select,
.woocommerce-page textarea{
  width:100%; max-width:520px; padding:11px 14px; border:1px solid var(--ui-line); border-radius:8px;
  background:var(--ui-card); color:var(--ui-text); font-size:15px; font-family:inherit; }
.woocommerce-page input.input-text:focus,
.woocommerce-page select:focus,
.woocommerce-page textarea:focus{ outline:2px solid var(--pdr-accent); outline-offset:1px; }
.woocommerce-page .woocommerce-input-wrapper{ display:block; }

/* My Account — sidebar nav + content */
.woocommerce-account .woocommerce{ display:flex; gap:var(--s5); align-items:flex-start; }
.woocommerce-MyAccount-navigation{ flex:0 0 230px; background:var(--pdr-surface); border:1px solid var(--pdr-line); border-radius:12px; padding:var(--s2); }
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.woocommerce-MyAccount-navigation li{ list-style:none; }
.woocommerce-MyAccount-navigation li a{ display:block; padding:11px 14px; border-radius:8px; color:var(--pdr-muted); text-decoration:none; font-weight:600; font-size:15px; }
.woocommerce-MyAccount-navigation li a:hover{ background:var(--pdr-bg-2); color:var(--pdr-text); }
.woocommerce-MyAccount-navigation li.is-active a{ background:var(--pdr-accent); color:#fff; }
.woocommerce-MyAccount-content{ flex:1 1 auto; min-width:0; }

/* Addresses — stack billing above shipping; "Add/Edit" as buttons */
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .u-columns.addresses{ display:grid; grid-template-columns:1fr; gap:var(--s4); }
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2{ width:100%; float:none; }
.woocommerce-Address-title{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s2); }
.woocommerce-Address-title h2,.woocommerce-Address-title h3{ margin:0; }
.woocommerce-Address-title .edit{
  background:var(--pdr-accent); color:#fff; border-radius:8px; padding:8px 16px; font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; }
.woocommerce-Address-title .edit:hover{ background:var(--pdr-accent-hover); }

/* Tables (orders / downloads) */
.woocommerce-page table.shop_table,
.woocommerce-page table.woocommerce-orders-table{ width:100%; border-collapse:collapse; border:1px solid var(--pdr-line); border-radius:12px; overflow:hidden; }
.woocommerce-page table.shop_table th,
.woocommerce-page table.shop_table td{ padding:12px 14px; border-bottom:1px solid var(--pdr-line); text-align:left; color:var(--pdr-text); font-size:14px; }
.woocommerce-page table.shop_table th{ background:var(--pdr-surface); font-weight:700; }

/* Notices */
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error{
  border-radius:10px; padding:14px 18px; margin:0 0 var(--s4); border:1px solid var(--pdr-line);
  background:var(--pdr-surface); color:var(--pdr-text); list-style:none; }
.woocommerce-page .woocommerce-message{ border-left:4px solid var(--pdr-accent); }
.woocommerce-page .woocommerce-error{ border-left:4px solid var(--pdr-error); }
.woocommerce-page .woocommerce-message .button{ float:right; }

/* Classic checkout — two columns on desktop */
.woocommerce-checkout #customer_details{ display:grid; gap:var(--s4); }
@media (min-width:900px){
  .woocommerce-checkout form.checkout.woocommerce-checkout{ display:grid; grid-template-columns:1.3fr .9fr; gap:var(--s6); align-items:start; }
  .woocommerce-checkout #customer_details{ grid-column:1; }
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review{ grid-column:2; }
}
.woocommerce-checkout #order_review{ background:var(--pdr-surface); border:1px solid var(--pdr-line); border-radius:12px; padding:var(--s4); }

/* Mobile: stack the My Account sidebar, scroll wide tables */
@media (max-width:780px){
  body.woocommerce-page main{ padding:var(--s5) var(--s3) var(--s8); }
  .woocommerce-account .woocommerce{ flex-direction:column; }
  .woocommerce-MyAccount-navigation{ flex:none; width:100%; }
  .woocommerce-page table.shop_table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* v1.12.2 — Gravity Forms readability on the dark theme. GF ships light-mode
   colors: labels default to navy (#112337) and descriptions/counters to gray
   (#585e6a), both nearly invisible on this dark background. Force them light so
   every field is readable (Kyle contact-form quality concern). Everything on a
   dark surface must stay well above WCAG AA. */
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label,
.gform_wrapper legend.gfield_label,
.gform_wrapper .gsection_title,
.gform_wrapper h2.gsection_title,
.gform_wrapper .gform_required_legend{ color:#ffffff !important; }
.gform_wrapper .gfield_description,
.gform_wrapper .ginput_counter,
.gform_wrapper .charleft,
.gform_wrapper .gform_fileupload_rules{ color:#c9d3e0 !important; }
.gform_wrapper .gfield_required{ color:#ff8a8a !important; }
.gform_wrapper .gform_validation_errors,
.gform_wrapper .validation_message{ color:#ffd5d5 !important; }

/* v1.12.2 (extended) — GF "complex" fields use a SEPARATE sub-label class the
   block above did not cover: the Name First/Last and Enter/Confirm Email
   sub-labels default to gray #585e6a (~3:1, fail) — the exact "can't even read
   Name" Kyle reported. Plus choice labels + form title/description. Forced
   white/near-white so every text element clears WCAG AA on the dark theme. */
.gform_wrapper .ginput_complex label,
.gform_wrapper .gfield_label_before_complex,
.gform_wrapper .gform-field-label--type-sub,
.gform_wrapper .gform-field-label--type-inline,
.gform_wrapper .gchoice label,
.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label,
.gform_wrapper .gform_title,
.gform_wrapper .gform_description,
.gform_wrapper .gsection_description{ color:#ffffff !important; }
/* Inputs → match the theme's other dark inputs (light text on a dark surface);
   guarantees legible typing text and kills any dark-on-dark if a box renders
   transparent. Submit button is intentionally NOT restyled here. */
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=url],
.gform_wrapper input[type=number],
.gform_wrapper textarea,
.gform_wrapper select{
  background:var(--pdr-surface) !important;
  color:var(--pdr-text) !important;
  border:1px solid var(--pdr-line) !important;
}
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder{ color:var(--pdr-muted) !important; }
/* Validation summary box: the near-white text set above is unreadable on GF's
   default LIGHT-pink box — give the box a dark red fill so the message stays
   legible on the dark theme. */
.gform_wrapper .gform_validation_errors{
  background:rgba(239,68,68,.12) !important;
  border:1px solid var(--pdr-error, #ef4444) !important;
  border-radius:10px !important;
}