/*
Theme Name: Kadence Child - Groundz
Theme URI: https://groundz.digital
Description: Lean custom child theme for groundz.digital 2026 rebuild. No page builder dependency.
Author: groundz.digital
Template: kadence
Version: 1.0.0
Text Domain: groundz-child
*/

/* Kills the browser's native blue tap-highlight flash on mobile taps —
   shows up as an unstyled default-blue overlay on any clickable element
   (buttons, links, accordion triggers) unless explicitly suppressed.
   Every interactive element gets its own deliberate active/focus state
   instead of the OS default. */
*{ -webkit-tap-highlight-color: transparent; }
/* Native <button> elements keep OS-level appearance (background, border,
   pressed/focus chrome) unless explicitly reset — on some platforms that
   surfaces as a default blue "pressed" state on custom buttons (accordion
   triggers, tab switches) that were never actually styled with one. Every
   button on the site is custom-styled, so appearance is reset globally
   once here instead of on a per-component basis. */
button{ appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: transparent; }
button:active, button:focus{ background-color: transparent; }

/* Kadence's parent theme ships a global default (a:hover{ color:
   var(--global-palette-highlight-alt) }, resolving to #2767c4) that fires
   on any link with no hover color of its own — including ones sitting on
   this site's own blue accent backgrounds (nav menu tiles, nav drawer
   links, the logo, header icons — all live outside <main>, so a fix
   scoped only to <main> missed every one of them), where it reads as
   illegible blue-on-blue. Neutralize it site-wide: an unstyled link keeps
   its own color on hover instead of jumping to a blue that was never part
   of this palette. Every component with its own deliberate hover color
   (footer, primary nav dropdown, mobile menu, inline body links, etc.)
   uses !important or a higher-specificity class selector and so still
   wins — this only reaches links that had no explicit hover treatment at
   all. */
body a:hover, body a:focus, body a:active{ color: inherit; }

/* Native cross-document page transitions — animates route changes on
 * navigation without a fetch-based JS swap (which would silently break
 * re-initialization of scroll reveals, counters, hero rotator, etc. on the
 * new page). Supported browsers animate; unsupported ones just navigate
 * normally — safe by construction, including through WooCommerce checkout. */
@view-transition{
  navigation: auto;
}
::view-transition-old(root){
  animation: gz-page-out .28s cubic-bezier(.4,0,.2,1) both;
}
::view-transition-new(root){
  animation: gz-page-in .32s cubic-bezier(.16,1,.3,1) both;
}
@keyframes gz-page-out{ to{ opacity: 0; transform: translateY(-8px); } }
@keyframes gz-page-in{ from{ opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation: none; }
}

:root{
  --gz-ink:#14181B;
  /* --gz-charcoal: lighter, single flat color, no texture — was already
   * quietly used for the nav dark tile (#262d31) because pure --gz-ink read
   * too harsh there. Promoted to the sitewide default for dark panel/button
   * fills; --gz-ink stays reserved for text and the darkest anchor moments. */
  --gz-charcoal:#262D31;
  --gz-charcoal-2:#2E363B;
  /* --gz-cream: warm paper ground, deliberately NOT near-white — walked
   * back after an earlier pass over-lightened it. Separation from card
   * fills now comes mainly from --gz-tint being pushed noticeably deeper
   * (see below), not from bleaching the page ground toward white. */
  --gz-cream:#F6F0E3;
  --gz-blue:#21ABDA;
  --gz-blue-light:#4FC3E8;
  --gz-blue-dark:#0B4E68;
  --gz-line:#e4e1d8;
  --gz-muted:#3f3f3c;
  --gz-tint:#E9DFC9;
  --gz-footer-grey:#6b6862;
  /* --gz-sprout: reserved for the hand-written cross-sell note + its arrow
   * only — confirmed working there. Never a fill on a real block/panel. */
  --gz-sprout:#3F6F49;
  --gz-sprout-deep:#1F3823;
  /* --gz-amber: eyebrows/badges/kickers — sprout didn't read right there.
   * -light for text on dark/charcoal, -deep for text on cream (AA-safe). */
  --gz-amber:#D99A3E;
  --gz-amber-light:#E3A542;
  --gz-amber-deep:#8A5A1E;
  /* --gz-void: full-bleed dark stage backgrounds (homepage hero, What We
   * Have Done's dark sections) — consolidated from two near-black
   * one-off hex values that were meant to be the same "true dark" but had
   * drifted apart component by component. Distinct from --gz-ink, which
   * stays reserved for text/anchor moments, not full-bleed fills. */
  --gz-void:#0B1014;
  /* --gz-mist: secondary/meta text sitting on dark panels (charcoal or
   * --gz-void fills) sitewide — consolidated from ~8 near-duplicate grays
   * that all did the same job with slightly different values across
   * different pages/components. */
  --gz-mist:#9AA3A6;
}

/* --gz-cream was always described as "the page ground" but never actually
   applied anywhere as a real default — every section sets its own cream/
   dark/accent fill individually, and any gap between them (or any
   template that doesn't cover its full height with a styled section) was
   silently falling through to raw browser-default white, not the site's
   actual paper tone. Deliberately targeting #wrapper.site instead of
   body/html directly: if body or html declares a background, the spec
   requires the UA to propagate it up to become the literal page canvas
   fill — a layer beneath the whole stacking-context tree that no z-index,
   however negative, can ever paint under. #wrapper.site is Kadence's real
   full-height content wrapper, a normal in-flow box, so it gets the same
   visible cream base without that trap. */
#wrapper.site{ background: var(--gz-cream); }

/* GZ-LIGHT-TEXTURE -- light-section counterpart to the dark stages'
   starfield: "device/app icon texture." Same device glyphs the seam
   connectors already use (phone + laptop), scattered sparse and very
   faint across the section, same spirit as stars on the dark side --
   texture, not a repeating wallpaper pattern trying to be noticed.
   Opt-in per section (applied to specific light sections, not every
   .gz-section globally -- dark-toned .gz-section instances share the
   same base class and must never get this). */
:root{
  --gz-light-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'%3E%3Cg fill='none' stroke='%23262D31' stroke-opacity='0.05' stroke-width='1.6'%3E%3Crect x='46' y='36' width='19' height='40' rx='4'/%3E%3Ccircle cx='55.5' cy='70' r='1.6' fill='%23262D31' fill-opacity='0.05' stroke='none'/%3E%3Crect x='236' y='176' width='42' height='27' rx='2.6'/%3E%3Cpath d='M236 203h42'/%3E%3Cpath d='M251 203v6M263 203v6'/%3E%3Crect x='120' y='230' width='40' height='30' rx='3'/%3E%3Cpath d='M120 236h40'/%3E%3Ccircle cx='126' cy='233' r='0.9' fill='%23262D31' fill-opacity='0.05' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
.gz-light-texture{
  /* !important: sections carrying this also carry their own inline
     style="background:..." for the base color -- that shorthand
     implicitly resets background-image to none as part of the same
     inline declaration, which otherwise beats any external stylesheet
     rule regardless of specificity. */
  background-image: var(--gz-light-texture) !important;
  background-repeat: repeat !important;
  background-size: 340px 340px !important;
}

/* ===================================================================
 * PAPER-CUT ASSEMBLY MECHANIC — shared, reusable panel system. Scoped
 * under .gz-assemble-scope (any section can opt in), not just the hero.
 * Grid/layout specifics for a given composition (hero, case studies,
 * marquee, ...) live in their own scope class below this block.
 * .panel/.btn/.accent are generic names from the locked prototype and
 * would otherwise collide sitewide — hence the scope requirement.
 * =================================================================== */
.gz-assemble-scope{
  --charcoal: var(--gz-ink);
  --cream: var(--gz-cream);
  --cyan: var(--gz-blue);
  --ease-slide: cubic-bezier(0.16,1,0.3,1);
  position: relative;
}

/* Rough-edge displacement (#gz-rough) must only ever touch a panel's
 * background/border shape, never live text — applying it to the whole
 * element (as the literal prototype port did) ran the filter over the
 * headline/body copy too. Fixed by moving the rough edge onto a ::before
 * background-only layer; real text stays crisp always, at rest or in
 * motion. Blur/opacity (motion feel) still apply to the whole panel. */
.gz-assemble-scope svg.gz-defs{ position: absolute; width: 0; height: 0; }
.gz-assemble-scope .panel{
  position: relative;
  opacity: 0;
  filter: blur(6px);
  transform: translateX(var(--slide-from, -120px)) rotate(var(--rot-from, -1.5deg));
  transition:
    opacity .55s var(--ease-slide),
    transform .8s var(--ease-slide),
    filter .8s var(--ease-slide);
}
.gz-assemble-scope .panel::before{
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: inherit; border-radius: inherit;
  clip-path: url(#gz-clip-lg);
}
.gz-assemble-scope .panel > *{ position: relative; z-index: 1; }
.gz-assemble-scope .panel.is-locked{
  opacity: 1;
  filter: blur(0px);
  transform: translateX(0) rotate(var(--rot-to, -0.4deg));
}
/* connection flash — cyan panel only, brief brightness pulse on the rough
 * background layer exactly, timed to settle, no glow/shadow */
.gz-assemble-scope .panel.accent{ background: var(--cyan); }
.gz-assemble-scope .panel.accent.is-locked::before{
  animation: gz-hero-flash .5s var(--ease-slide) .55s 1;
}
@keyframes gz-hero-flash{
  0%{ filter: brightness(1); }
  40%{ filter: brightness(1.6); }
  100%{ filter: brightness(1); }
}

.gz-assemble-scope .panel.dark{ background: var(--gz-charcoal); }
.gz-assemble-scope .panel.cream{ background: var(--cream); }

/* ===================================================================
 * GZ-INTRO — one-time charcoal splash, homepage only. Fixed overlay (NOT
 * a scroll-linked document section) so it can never re-trigger on scroll-
 * back-up and trap navigation: locks page scroll, the first wheel/touch/
 * key input drives a local progress value that fades/zooms it out, and at
 * progress 1 it's removed from the DOM (display:none) permanently. Has a
 * slot for a hero video (data-video on the container) — falls back to the
 * logo-only treatment until a video file is wired in.
 * =================================================================== */
html.gz-lock, html.gz-lock body{ overflow: hidden; height: 100%; overscroll-behavior: none; }
.gz-intro{
  position: fixed; inset: 0; z-index: 9999;
  /* Was --gz-charcoal -- a real, different color from the hero's own
     --gz-void it's supposed to be unbroken continuity into. */
  background: var(--gz-void);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer;
  touch-action: none;
}
.gz-intro-video{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
/* The real WebGL Signal Field (gzMountSignalField, shared with the hero/
   footer/CTA/page-hero-stage) mounted behind the 2D canvas, for the
   stars/planets/satellites ambient dressing -- "don't write it
   separately, just make it one effect file, use same everywhere." Sits
   at z-index:0, the 2D canvas above it at z-index:1 now only draws the
   intro's own bespoke satellite-with-logo + beam narrative, which has
   no equivalent in the ambient loop and stays 2D canvas (see the
   readiness-poll in the wp_footer script for why). */
.gz-intro-webgl-canvas{
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
/* Full viewport, not a small boxed frame -- "whole screen is space."
   Was min(640px,82vw)/min(360px,48vh), a centered box with plain dark
   background around it; the canvas itself now IS the entire fixed
   overlay, so satellite/beam/stars draw across the whole screen. */
.gz-intro-canvas{
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  display: block;
}
.gz-intro-logo{
  width: min(46vw, 460px); height: auto; position: absolute; z-index: 1;
  opacity: 0; will-change: transform, opacity, filter;
}
.gz-intro-sound-cue{
  position: absolute; top: 28px; right: 28px; z-index: 2;
  display: flex; align-items: center; gap: 7px;
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gz-mist); opacity: 0; transition: opacity .4s ease, color .2s ease;
  pointer-events: none;
  background: none; border: none; cursor: pointer; padding: 6px;
}
/* Visible + tappable as soon as the sequence starts (not only once audio
   already unlocked) — otherwise this is a manual fallback nobody can ever
   reach, since it'd only appear after it's no longer needed. */
.gz-intro-sound-cue.is-visible{ opacity: .7; pointer-events: auto; }
.gz-intro-sound-cue.is-visible:hover{ opacity: 1; }
.gz-intro-sound-cue.is-on{ color: var(--gz-blue-light); }
.gz-intro-scroll{
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gz-mist); z-index: 1;
}
.gz-intro-chevron{ color: var(--gz-blue); font-size: 13px; animation: gz-intro-bob 1.6s ease-in-out infinite; }
@keyframes gz-intro-bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce){ .gz-intro-chevron{ animation: none; } }
.gz-intro-skip{
  position: absolute; top: 28px; left: 28px; z-index: 2;
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gz-mist); opacity: .55; transition: opacity .2s ease, color .2s ease;
  background: none; border: none; cursor: pointer; padding: 6px;
}
.gz-intro-skip:hover, .gz-intro-skip:focus-visible{ opacity: 1; color: var(--gz-blue-light); }

/* ===================================================================
 * GZ-BUILD — corner-bracket construction overlay for key reveal moments
 * (headline block, proof panel, a couple of tiles — never every element).
 * Brackets rise then fade as the piece assembles, with a snap-pulse the
 * moment it locks in. Uses the site's existing panel-reveal mechanic
 * (.is-locked) as the trigger rather than a separate scroll listener.
 * =================================================================== */
.gz-build{ position: relative; }
.gz-build-frame{ position: absolute; inset: -11px; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.gz-build.is-locked .gz-build-frame{ animation: gz-build-frame-cycle 1.1s ease-out forwards; }
@keyframes gz-build-frame-cycle{
  0%{ opacity: 0; }
  45%{ opacity: 1; }
  100%{ opacity: 0; }
}
.gz-build-frame .cnr{ position: absolute; width: 16px; height: 16px; }
.gz-build-frame .cnr.tl{ top: 0; left: 0; border-top: 2px solid var(--gz-blue); border-left: 2px solid var(--gz-blue); }
.gz-build-frame .cnr.tr{ top: 0; right: 0; border-top: 2px solid var(--gz-blue); border-right: 2px solid var(--gz-blue); }
.gz-build-frame .cnr.bl{ bottom: 0; left: 0; border-bottom: 2px solid var(--gz-blue); border-left: 2px solid var(--gz-blue); }
.gz-build-frame .cnr.br{ bottom: 0; right: 0; border-bottom: 2px solid var(--gz-blue); border-right: 2px solid var(--gz-blue); }
@keyframes gz-snap{ 0%{ box-shadow: 0 0 0 0 rgba(33,171,218,.5); } 100%{ box-shadow: 0 0 0 16px rgba(33,171,218,0); } }
.gz-build.is-locked{ animation: gz-snap .55s ease-out 1s both; }
@media (prefers-reduced-motion: reduce){
  .gz-build.is-locked .gz-build-frame{ animation: none; }
  .gz-build.is-locked{ animation: none; }
}

/* ===================================================================
 * GZ-NOTE — hand-written cross-sell aside with a small drawn arrow. This
 * is the only sanctioned use of --gz-sprout as anything other than a
 * badge/mark: a short aside pointing at what to look at next.
 * =================================================================== */
.gz-note{
  position: absolute; pointer-events: none; z-index: 2;
  font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
  font-size: 14px; color: var(--gz-sprout-deep); line-height: 1.25;
}
.gz-note svg{ position: absolute; overflow: visible; }
.gz-note svg path{ fill: none; stroke: var(--gz-sprout); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* .gz-note-flow: a natural in-flow variant instead of position:absolute
 * with hand-tuned pixel offsets — the offsets only matched one specific
 * button-label length/viewport and drifted out of alignment with the
 * buttons whenever that wrapped or the labels changed. Flows as a normal
 * flex sibling next to the CTAs instead, arrow included inline. */
.gz-note-flow{
  position: static; display: flex; align-items: center; gap: 4px;
  flex: 0 0 auto; align-self: center; max-width: 150px; margin-left: 2px;
}
.gz-note-flow svg{ position: static; flex: none; }

/* ===================================================================
 * GZ-VERIFY — hand-drawn marker stroke under one headline word, replaces
 * a flat highlighter-box. Draws itself on via JS (stroke-dashoffset).
 * =================================================================== */
.gz-verify{ position: relative; color: var(--gz-blue-dark); white-space: nowrap; }
.gz-verify-mark{ position: absolute; left: -6px; right: -6px; bottom: -14px; width: calc(100% + 12px); height: 20px; overflow: visible; pointer-events: none; }
.gz-verify-mark path{ fill: none; stroke: var(--gz-blue); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

/* ===================================================================
 * GZ-BTN-GHOST — outline button variant used outside the .gz-hero-stage
 * scope (that one already has its own .btn.ghost). Border lives on
 * ::before, clipped by the same wobble shape as the fill on .gz-btn.
 * 2px, not 1.5px — the clip path's shallow inward dips (~2-3%) still
 * clip a couple px at the tightest points, and a too-thin border there
 * reads as broken/missing rather than hand-cut. */
.gz-btn-ghost{ background: transparent !important; color: var(--gz-ink); }
.gz-btn-ghost::before{ background: transparent !important; border: 2px solid rgba(20,24,27,.55); }
.gz-btn-ghost:hover{ color: var(--gz-blue-dark); }
.gz-btn-ghost:hover::before{ border-color: var(--gz-blue); }
.gz-btn-ghost-dark{ color: #F2F0EA; }
.gz-btn-ghost-dark::before{ border-color: rgba(248,243,234,.5); }
.gz-btn-ghost-dark:hover{ color: var(--gz-blue-light); }
.gz-btn-ghost-dark:hover::before{ border-color: var(--gz-blue-light); }

/* ===================================================================
 * GZ-HOME-HERO — cream-dominant, one ink/charcoal anchor (the proof
 * panel), blue confined to the Verify mark, one button and the proof
 * numerals. Replaces the old 12-col hero-assembly.php composition, which
 * put a full-bleed cyan panel directly beside a full-bleed dark one.
 * =================================================================== */
/* Dark volumetric stage for the WebGL scene (see #gz-hero-motion in
 * functions.php) — a real space the hero copy floats in front of, not
 * the site's usual cream ground. The rest of the page returns to the
 * established light system right after; this is a deliberate one-section
 * "arrival" beat, same idea as the intro's own dark charcoal, carried a
 * little further before the site opens up into its normal daylight self. */
.gz-home-hero-stage{
  position: relative; z-index: 0; background: var(--gz-void); padding: 48px 24px 90px; overflow: hidden; perspective: 1400px;
  /* Full-bleed: Kadence's own content-width wrapper (site-main/entry-
     content-wrap) constrains normal page content to ~1382px even on a
     1920px viewport — correct for reading text, wrong for a full-scene
     3D background, which read as "container locked" with dead space on
     both sides instead of spanning the real browser width. Same
     escape-the-parent trick this section's own ::before grid pattern
     already used, now applied to the section itself so the mounted
     WebGL canvas (sized to this element's own rect) gets the same full
     width to render into. */
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.gz-home-hero-stage::before{
  content: ''; position: absolute; z-index: -1;
  top: -40px; left: 50%; width: 100vw; height: calc(100% + 80px); transform: translateX(-50%);
  background-image:
    repeating-linear-gradient(0deg, rgba(33,171,218,.09) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(33,171,218,.09) 0 1px, transparent 1px 56px);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, #000 55%, transparent 100%);
}
/* Continuous ambient motion behind the hero — the static blueprint grid
   above gave the hero a "we build things" backdrop but zero actual
   energy once the one-time panel reveal finished. This keeps drawing
   slowly, forever, tying the same construction motif (rough-cut panels,
   grid sweep) to the intro's one-time build sequence without repeating
   it verbatim. No footage was supplied for this hero, so motion is
   generated, not filmed — see #gz-hero-motion in functions.php. */
.gz-hero-motion-canvas{ position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

/* Sitewide ambient WebGL layer — scoped as a normal child INSIDE the
   footer itself (see functions.php), not a fixed full-viewport canvas
   behind the page. That approach relied on every ancestor between the
   canvas and the footer having a transparent background, but Kadence's
   own #wrapper.site always carries a baseline `transform:translateX(0)`
   for the mobile drawer slide, which makes it a stacking-context boundary
   — any background on it (or on body) paints as an opaque floor above a
   negative-z-index sibling regardless of what any descendant does. Scoped
   locally like this, the canvas just paints within the footer's own local
   stacking order — same z-index:0-canvas / z-index:1-content pattern
   already proven working on the homepage hero (see .gz-hero-motion-canvas
   / .gz-home-hero-grid above). */
.site-footer{ position: relative; overflow: hidden; }
/* Canvas class here is .gz-cta-stage-canvas, not a footer-specific one --
   the footer is just one more stage the shared Signal Field mount loop
   runs on now (see the wp_footer hook), same as every other dark stage. */
.site-footer .site-info,
.site-footer .footer-widget-area{ position: relative; z-index: 1; }
.gz-home-hero-grid{
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  /* 2nd track was a fixed 0.85fr share of the row regardless of how
     narrow the proof block's own content actually was, leaving a wide
     dead gap between the copy and the proof block on anything wider
     than ~1300px ("cramped where there's lots of space"). auto sizes
     the track to the proof block's real content width instead, and the
     copy column reclaims whatever space that frees up. */
  display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center;
  transform-style: preserve-3d;
}
/* Nothing here is a block — every child is its own object floating at
   its own depth in the same WebGL space as the panels, entrance-animated
   on its own beat (translateZ baked into the keyframe via --depth-z so it
   survives past `forwards`) and then continuously nudged by mouse parallax
   via the `translate` property (kept separate from `transform` on purpose:
   the two compose independently, so JS-driven parallax each frame never
   fights the CSS keyframe still holding the entrance transform). Legibility
   comes from real text-shadow against the dark void, never a panel behind
   it — see gz-hero-motion in functions.php for the parallax driver. */
.gz-home-hero-copy{ background: none; box-shadow: none; padding: 0; }
.gz-home-hero-copy > *,
.gz-home-hero-proof > *{ opacity: 0; animation: gz-hero-kinetic-in .9s cubic-bezier(.16,1,.3,1) forwards; }
.gz-home-hero-copy .gz-eyebrow-pill{ animation-delay: .1s; --depth-z: 18px; }
.gz-home-hero-copy h1{ animation-delay: .28s; --depth-z: 48px; }
.gz-home-hero-copy .gz-sub{ animation-delay: .52s; --depth-z: 32px; }
.gz-home-hero-copy .gz-home-hero-ctas{ animation-delay: .72s; --depth-z: 14px; }
.gz-home-hero-proof .gz-home-hero-proof-kicker{ animation-delay: .62s; --depth-z: 70px; }
.gz-home-hero-proof .gz-home-hero-proof-row:nth-child(3){ animation-delay: .78s; --depth-z: 85px; }
.gz-home-hero-proof .gz-home-hero-proof-row:nth-child(4){ animation-delay: .92s; --depth-z: 96px; }
.gz-home-hero-proof .gz-home-hero-proof-row:nth-child(5){ animation-delay: 1.06s; --depth-z: 107px; }
@keyframes gz-hero-kinetic-in{
  0%{ opacity: 0; transform: translateZ(var(--depth-z, 0px)) translateY(28px) scale(.97); filter: blur(6px); }
  60%{ filter: blur(0); }
  100%{ opacity: 1; transform: translateZ(var(--depth-z, 0px)) translateY(0) scale(1); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce){
  .gz-home-hero-copy > *,
  .gz-home-hero-proof > *{ animation: none; opacity: 1; transform: translateZ(var(--depth-z, 0px)); }
}
.gz-home-hero-copy h1{
  font-family: "Outfit", sans-serif; font-weight: 800;
  font-size: clamp(32px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -0.01em;
  margin: 0 0 20px; color: #fff; text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.4);
}
.gz-home-hero-copy h1 .gz-verify{ color: var(--gz-blue-light); }
.gz-home-hero-copy .gz-sub{
  font-size: 16px; line-height: 1.6; color: rgba(242,240,234,.82); max-width: 46ch; margin: 0 0 30px;
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
}
/* Eyebrow pill + hand-note were tuned for the old cream ground — need
   real contrast against the dark void now. */
.gz-home-hero-copy .gz-eyebrow-pill{
  color: var(--gz-blue-light); background: rgba(33,171,218,.16); border-color: rgba(79,195,232,.5);
}
.gz-home-hero-copy .gz-note{ color: #C9D9C0; }
.gz-home-hero-copy .gz-note svg path{ stroke: #8FBF7A; }
/* .gz-btn-ghost's real colors (--gz-ink text, near-black border) assume
   the site's usual cream ground — against this hero's near-black void
   (var(--gz-void)) that's effectively invisible text on invisible-on-invisible.
   Caught by re-checking every hero color against the dark background,
   not just the ones already known to need it. */
.gz-home-hero-copy .gz-btn-ghost{ color: #F2F0EA; text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.gz-home-hero-copy .gz-btn-ghost::before{ border-color: rgba(242,240,234,.35); }
.gz-home-hero-copy .gz-btn-ghost:hover{ color: var(--gz-blue-light); }
.gz-home-hero-copy .gz-btn-ghost:hover::before{ border-color: rgba(79,195,232,.6); }
.gz-eyebrow-pill{
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Outfit", sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gz-blue-dark); background: rgba(33,171,218,.11); border: 1px solid rgba(33,171,218,.4);
  padding: 6px 13px; border-radius: 999px; margin-bottom: 22px;
}
.gz-home-hero-ctas{ position: relative; display: flex; gap: 12px; flex-wrap: wrap; }

/* No box at all — three readouts suspended loose in the same depth space
   as the panels, each its own object (own entrance beat, own --depth-z,
   own parallax weight up in the JS driver), not one grouped card. Legibility
   comes from text-shadow against the void, same technique as the copy. */
/* width:fit-content (not max-width alone) so this always sizes to its
   own content and margin-left:auto pushes that compact block to the
   right edge -- on desktop the auto-margin quirk already did this, but
   the content itself read too small against the wide empty column next
   to it ("cramped where there's lots of space"), so the type scale below
   is bigger than the old 22px/12.5px. On mobile the grid collapses to a
   single column and margin-left was reset to 0, which combined with
   plain block sizing let the box stretch to the full content width and
   read as edge-to-edge; fit-content + margin-left:auto keeps it compact
   and pulled off the left edge there too, same as desktop. */
.gz-home-hero-proof{ position: relative; width: fit-content; max-width: 100%; margin-left: auto; }
.gz-home-hero-proof-kicker{
  display: block; font-family: "Outfit", sans-serif !important; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600 !important; color: var(--gz-blue-light); margin-bottom: 24px; text-align: right;
  text-shadow: 0 2px 16px rgba(0,0,0,.7); white-space: nowrap;
}
.gz-home-hero-proof-row{
  display: flex; align-items: baseline; justify-content: flex-end; gap: 20px; padding: 16px 0;
  font-size: 13.5px; color: rgba(242,240,234,.78); text-align: right; white-space: nowrap;
  text-shadow: 0 2px 16px rgba(0,0,0,.7);
  text-decoration: none; transition: opacity .15s ease;
}
.gz-home-hero-proof-row:hover{ opacity: .8; }
.gz-home-hero-proof-row strong{ font-family: "JetBrains Mono", monospace; font-size: 28px; font-weight: 700; color: var(--gz-blue-light); text-shadow: 0 0 24px rgba(33,171,218,.5), 0 2px 16px rgba(0,0,0,.7); }
@media (max-width: 860px){
  .gz-home-hero-grid{ grid-template-columns: 1fr; }
  .gz-home-hero-proof{ width: fit-content; max-width: 100%; margin-left: auto; }
}
@media (max-width: 400px){
  .gz-home-hero-proof-row{ white-space: normal; gap: 14px; }
  .gz-home-hero-proof-row strong{ font-size: 24px; }
}

/* ===================================================================
 * GZ-HOME-STRIP — thin stat bar, blue confined to numerals + one hairline.
 * =================================================================== */
.gz-home-strip{ background: var(--gz-tint); border-top: 1px solid var(--gz-line); border-bottom: 1px solid var(--gz-line); }
.gz-home-strip-inner{ max-width: 1200px; margin: 0 auto; padding: 26px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.gz-home-strip-item{ display: flex; align-items: center; gap: 10px; }
.gz-home-strip-item span:last-child{ font-size: 12.5px; color: var(--gz-muted); font-weight: 500; max-width: 20ch; line-height: 1.3; }
.gz-home-strip-num{ min-width: 3.5ch; text-align: right; }
.gz-home-strip-num{ font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 24px; color: var(--gz-blue-dark); }

/* ===================================================================
 * GZ-HOME-SVC-GRID — 12 full-funnel services, tone-banded hand-cut tiles.
 * Section sits on --gz-tint; cream tone tiles use the lighter --gz-cream
 * so they read as distinct objects rather than blending into the section.
 * =================================================================== */
/* Flex, not grid auto-fill: an auto-fill grid left-aligns whatever's left
 * in a ragged last row, leaving dead space on the right whenever the
 * item count doesn't divide evenly into a full row (e.g. 6 tiles in a
 * 4-wide layout leaves 2 stranded on the left). Flex-wrap + centered
 * justify-content centers every row, including a ragged last one. */
.gz-home-svc-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px; }
.gz-home-svc-tile{
  flex: 1 1 220px; max-width: 280px;
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; text-decoration: none;
  transition: transform .15s ease;
}
.gz-home-svc-tile::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: inherit; border-radius: inherit;
  clip-path: url(#gz-clip-btn);
}
.gz-home-svc-tile:hover{ transform: translateY(-2px); }
.gz-home-svc-tile .idx{ font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; flex: none; opacity: .85; align-self: flex-start; margin-top: 2px; }
.gz-home-svc-tile .txt{ flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gz-home-svc-tile .nm{ font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.gz-home-svc-tile .tag{ font-size: 11px; font-weight: 500; line-height: 1.3; opacity: .72; text-wrap: balance; }
.gz-home-svc-tile .ar{ font-size: 14px; flex: none; opacity: .8; align-self: flex-start; margin-top: 2px; }
.gz-home-svc-tile.dark{ background: var(--gz-charcoal); color: #F2F0EA; }
.gz-home-svc-tile.accent{ background: var(--gz-blue); color: var(--gz-ink); }
.gz-home-svc-tile.cream{ background: var(--gz-cream); color: var(--gz-ink); box-shadow: 0 8px 20px -12px rgba(20,24,27,.3), 0 0 0 1px rgba(20,24,27,.14); }

/* ===================================================================
 * GZ-HOME-PATHS — "Pick Your Path": the homepage's actual conversion
 * job. Three tone-banded cards, cheapest/lowest-commitment (Audit) to
 * most-committed (Packages), each with real Package.md pricing.
 * =================================================================== */
.gz-home-paths{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.gz-home-path{
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 10px;
  padding: 30px 26px; text-decoration: none;
}
.gz-home-path::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: inherit; border-radius: inherit;
  clip-path: url(#gz-clip-lg);
}
.gz-home-path-kicker{ font-family: "Outfit", sans-serif !important; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600 !important; opacity: .75; }
.gz-home-path h3{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 21px; margin: 2px 0 0; }
.gz-home-path-price{ font-family: "JetBrains Mono", monospace; font-size: 13.5px; font-weight: 600; }
.gz-home-path p{ font-size: 13px; line-height: 1.55; margin: 4px 0 6px; flex: 1; }
.gz-home-path-cta{ font-size: 13px; font-weight: 700; }
/* Two-way choice CTA (service vs product business) — used wherever a card
   would otherwise default to one package page and force the other type of
   business to notice a small "switch" link after the fact. Shared between
   the homepage path card and the Services hub teaser. */
.gz-choice-ctas{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.gz-choice-cta{ font-size: 12.5px; font-weight: 700; padding: 8px 13px; border-radius: 8px; text-decoration: none; border: 1.5px solid; transition: background .15s ease, color .15s ease; }
/* Color set explicitly per element on every tone, never left to inherit —
   Kadence's own bare h3{color} selector has real specificity and beats an
   inherited (zero-specificity) value, so a parent's `color` alone silently
   fails to reach the heading. Confirmed live: this exact bug produced a
   dark-on-dark heading on the "Full-Funnel Packages" card. */
/* #fff, not --gz-tint -- this card used to sit on a --gz-cream section,
   so --gz-tint read as a distinct "card" surface. The section it sits in
   now uses --gz-tint itself (see .gz-home-paths section), which made the
   card and its background literally the same color with only a faint
   border between them. White reads as a clear card against either
   --gz-cream or --gz-tint. */
.gz-home-path.cream{ background: #fff; border: 1px solid rgba(20,24,27,.14); box-shadow: 0 8px 20px -14px rgba(20,24,27,.3); }
.gz-home-path.cream h3, .gz-home-path.cream p, .gz-home-path.cream .gz-home-path-cta{ color: var(--gz-ink); }
.gz-home-path.cream .gz-home-path-price{ color: var(--gz-blue-dark); }
.gz-home-path.cream .gz-home-path-kicker{ color: var(--gz-amber-deep); }
.gz-home-path.accent{ background: var(--gz-blue); }
.gz-home-path.accent h3, .gz-home-path.accent p, .gz-home-path.accent .gz-home-path-cta, .gz-home-path.accent .gz-home-path-price, .gz-home-path.accent .gz-home-path-kicker{ color: var(--gz-ink); }
.gz-home-path.dark{ background: var(--gz-charcoal); }
.gz-home-path.dark h3, .gz-home-path.dark .gz-home-path-cta{ color: #F2F0EA; }
.gz-home-path.dark p{ color: var(--gz-mist); }
.gz-home-path.dark .gz-home-path-price{ color: var(--gz-blue-light); }
.gz-home-path.dark .gz-home-path-kicker{ color: var(--gz-amber-light); }
.gz-home-path.dark .gz-choice-cta{ border-color: #F2F0EA; color: #F2F0EA; }
.gz-home-path.dark .gz-choice-cta:hover{ background: #F2F0EA; color: var(--gz-charcoal); }
.gz-home-path:hover{ transform: translateY(-3px); transition: transform .18s ease; }
@media (max-width: 860px){ .gz-home-paths{ grid-template-columns: 1fr; } }

/* ===================================================================
 * GZ-CTA — ported directly from the approved mockup's .cta-stage system:
 * charcoal anchor, left-aligned headline, floating rotated cream panel
 * carrying the copy + buttons. Same component naming as the mockup
 * (renamed gz- prefixed to avoid any collision with other theme classes).
 * =================================================================== */
/* "we are not using colors now, we are copying exact effect from hero
   everywhere" -- was --gz-charcoal (a genuinely different, lighter
   color than the hero's --gz-void), confirmed live as a real mismatch,
   not matching colors as I'd assumed. Every full-bleed dark stage now
   uses the exact same --gz-void the hero itself uses. */
.gz-cta-stage{
  /* Bottom padding was tuned back when this had its own visibly-
     different charcoal block to fill; now that it's the same --gz-void
     as the footer right below it with no color break between them, the
     old 130px made the pair read as one oversized empty footer block --
     trimmed. Top padding stays generous on purpose: the preceding
     up-seam's satellite mark overlaps 64px into this section's own top
     edge (see .gz-seam-up), and the kicker/heading sit right behind it
     -- reported live as the satellite crowding "READY TO MOVE FASTER?".
     100px clears the satellite (64px) plus real breathing room. */
  background: var(--gz-void); color: var(--gz-cream); padding: 100px 40px 28px; position: relative; overflow: hidden;
  /* Full-bleed, same reasoning/technique as .gz-home-hero-stage above —
     this section otherwise inherits Kadence's ~1382px content-width cap,
     leaving the mounted Signal Field canvas container-locked instead of
     spanning the real viewport width. */
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.gz-cta-stage-canvas{ position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.gz-cta-inner{ max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; }
.gz-cta-eyebrow{ font-family: "Outfit", sans-serif !important; font-size: 11.5px; font-weight: 600 !important; letter-spacing: .06em; text-transform: uppercase; color: var(--gz-amber-light); margin-bottom: 16px; }
h2.gz-cta-h{ font-family: "Outfit", sans-serif; font-size: clamp(28px,3.6vw,44px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.08; margin: 0 0 40px; max-width: 14ch; text-wrap: balance; color: var(--gz-cream); }
.gz-cta-float{
  position: relative; isolation: isolate;
  background: var(--gz-cream); color: var(--gz-ink);
  max-width: 560px; padding: 30px 34px;
  transform: rotate(-0.8deg);
}
.gz-cta-float::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: inherit; clip-path: url(#gz-clip-lg);
}
.gz-cta-float p{ font-size: 14.5px; color: var(--gz-muted); margin: 0 0 20px; max-width: 38ch; }
.gz-cta-ctas{ display: flex; gap: 12px; flex-wrap: wrap; }
/* .gz-cta-stage never had a mobile override at all — its 100px/130px
   top/bottom desktop padding (sized for a large full-bleed dark stage)
   left ~230px of pure empty padding on a ~812px-tall phone viewport,
   reading as a broken blank gap before the footer. Reused across many
   templates (home, service-single, package-detail, contact, blog
   single...), so this one fix applies sitewide, not per-page. */
@media (max-width: 640px){
  /* 80px alone put the mobile satellite (now shown here instead of
     hidden -- "server online and satellite in cta is not shown on
     mobile") right on top of the heading below it; enough clearance now
     for its own ~100px craft + label before real copy starts. */
  .gz-cta-stage{ padding: 148px 20px 48px; }
  .gz-cta-float{ padding: 24px 22px; max-width: none; }
  h2.gz-cta-h{ margin-bottom: 28px; }
}
/* ===================================================================
 * GZ-CTA-SATELLITE -- replaces the standard 3-satellite/3-device seam
 * specifically at the light->CTA-stage handoff. "satellites and devices
 * are becoming repetitive in footer... better option is placing the
 * same groundz digital satellite from intro on right side of the cta,
 * and just one link coming out of it to cream panel, and there one icon
 * of server saying server online." One big satellite (same craft shape
 * as the intro's, not the small seam glyphs), filling the CTA-stage's
 * otherwise-empty right side (the layout is left-aligned copy + float
 * panel, per the mockup this was ported from) -- one line down to the
 * float panel, ending at a small "Server Online" status chip instead of
 * a device glyph. Mounted by JS (see wp_footer) onto every .gz-cta-stage
 * found on the page, not per-template markup, so every page with one
 * gets this automatically and consistently.
 * =================================================================== */
.gz-cta-satellite{
  position: absolute; top: 6%; right: 5%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.gz-cta-satellite-craft{ width: 210px; height: auto; overflow: visible; color: #4FC3E8; filter: drop-shadow(0 0 14px rgba(79,195,232,.5)); }
.gz-cta-satellite-craft .body{ fill: none; stroke: currentColor; stroke-width: 1.6; }
.gz-cta-satellite-craft .panel-line{ stroke: currentColor; stroke-width: 1; opacity: .6; }
.gz-cta-satellite-craft .blink{ fill: currentColor; animation: gz-cta-blink 1.8s ease-in-out infinite; }
@keyframes gz-cta-blink{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
.gz-cta-satellite-label{
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .12em;
  color: var(--gz-blue-light); text-transform: uppercase; opacity: .85; white-space: nowrap;
}
/* Mounted on <body> (spans across two sibling sections, so it needs
   page-level coordinates, not coordinates relative to either single
   section) as a zero-size anchor at the page origin -- overflow:visible
   lets the line/dot render anywhere on the page from that one point,
   without sizing the svg element itself to cover the whole document. */
.gz-cta-link-svg{ position: absolute; top: 0; left: 0; width: 1px; height: 1px; z-index: 50; pointer-events: none; overflow: visible; }
.gz-cta-link-svg line{ stroke: #21ABDA; stroke-width: 1.6; opacity: .55; }
.gz-cta-link-svg circle.gz-cta-link-dot{
  fill: #B9EAFB; filter: drop-shadow(0 0 6px rgba(185,234,251,.9));
  animation: gz-cta-link-travel 3.6s ease-in-out infinite;
}
@keyframes gz-cta-link-travel{ 0%,8%{ opacity:0; } 14%{ opacity:1; } 86%{ opacity:1; } 100%{ opacity:0; } }
/* "cta container only had the satellite. previous cream container from
   page has the server and the beam connects. same like we have done on
   hero" -- lives in whatever real section precedes the CTA-stage on
   this page (JS-appended there, not part of any one template's own
   markup), straddling THAT section's own bottom edge -- same concept
   as a seam's device mark straddling a boundary line, not just sitting
   as regular content inside a panel. */
.gz-cta-server-badge{
  position: absolute; bottom: 24px; right: 34px; z-index: 25;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--gz-cream); padding: 9px 18px; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(20,24,27,.1), 0 6px 14px -8px rgba(20,24,27,.3);
  font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gz-blue-dark);
}
/* Bigger than the seam connectors' device glyphs on purpose -- this is
   the one, deliberate "server" icon on the page, not an echo of those. */
.gz-cta-server-badge svg{ width: 30px; height: 30px; flex: none; }
.gz-cta-server-badge .dot{
  width: 9px; height: 9px; border-radius: 50%; background: #2E9B5A; flex: none;
  box-shadow: 0 0 9px 2px rgba(46,155,90,.75); animation: gz-cta-blink 1.8s ease-in-out infinite;
}
/* "server online and satellite in cta is not shown on mobile" -- was a
   deliberate display:none (no empty right-side space once the float
   panel goes full-width), but that read as the feature just missing
   rather than a considered choice. Repositioned instead: satellite
   moves to its own centered space above the "Ready To Move Faster?"
   heading (real dark room there, confirmed live), smaller so it never
   crowds the heading under it. The beam still computes real geometry
   from wherever both ends actually land (see wp_footer JS), so it
   doesn't need special-casing here beyond the satellite's own new spot. */
@media (max-width: 900px){
  .gz-cta-satellite{ top: 14px; right: auto; left: 50%; transform: translateX(-50%); }
  .gz-cta-satellite-craft{ width: 100px; }
  .gz-cta-satellite-label{ font-size: 10px; }
}

.gz-about-proof-row{ display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.gz-about-proof-row .num{ display: block; font-family: "JetBrains Mono", monospace; font-size: 22px; font-weight: 700; color: var(--gz-blue-dark); }
.gz-about-proof-row .lbl{ display: block; font-size: 11px; color: var(--gz-muted); max-width: 16ch; margin-top: 2px; }

/* ===== Hero-specific composition (12-col grid) ===== */
.gz-hero-stage{
  background: var(--charcoal);
  overflow: hidden;
}
.gz-hero-stage .stage{
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--charcoal);
  padding: 80px 60px 100px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(70px, auto); /* fixed 70px overflowed with real copy, unlike the static prototype — rows now grow instead of overlapping the row below */
  gap: 14px;
}

/* typography — breaks out of its panel, oversized */
.gz-hero-stage .headline{
  grid-column: 1 / span 7;
  grid-row: 1 / span 4;
  --slide-from: -160px; --rot-from: -2deg; --rot-to: -0.6deg;
  padding: 36px 40px;
  display: flex; flex-direction: column; justify-content: center;
}
.gz-hero-stage .headline .eyebrow{
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 18px;
}
.gz-hero-stage .headline h1{
  color: var(--cream) !important;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.02;
  font-weight: 800 !important;
  max-width: 11ch;
}
.gz-hero-stage .headline h1 span{ color: var(--cyan); }
.gz-hero-stage .headline p{
  color: var(--gz-mist); font-size: 16px; line-height: 1.5; margin-top: 22px; max-width: 42ch;
}
.gz-hero-stage .headline .ctas{ margin-top: 28px; display: flex; gap: 14px; }
.gz-hero-stage .btn{
  position: relative;
  isolation: isolate;
  font-family: "Outfit", sans-serif !important; font-weight: 700 !important; font-size: 15px;
  padding: 14px 26px; border: 2px solid var(--charcoal); cursor: pointer;
  background: var(--cyan); color: var(--charcoal);
  text-decoration: none; display: inline-block;
}
/* rough edge on a background-only layer again — button label text stays
 * crisp. z-index:-1 (contained by isolation:isolate above) keeps this
 * behind the anchor's own inline text instead of painting over it. */
.gz-hero-stage .btn::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: inherit; border: inherit;
  clip-path: url(#gz-clip-btn);
}
.gz-hero-stage .btn.ghost{ background: transparent; color: var(--cream); border-color: var(--cream); }

/* offset accent panel */
.gz-hero-stage .accent{
  grid-column: 9 / span 4;
  grid-row: 1 / span 3;
  --slide-from: 160px; --rot-from: 2deg; --rot-to: 0.5deg;
}

/* number panels — big mono digits, own panel each, staggered entrance */
.gz-hero-stage .num{
  grid-row: 5 / span 3;
  --slide-from: -100px;
  background: var(--gz-charcoal);
  padding: 22px 24px;
  display: flex; flex-direction: column; justify-content: center;
}
.gz-hero-stage .num.n1{ grid-column: 1 / span 3; }
.gz-hero-stage .num.n2{ grid-column: 4 / span 3; --slide-from: -60px; }
.gz-hero-stage .num.n3{ grid-column: 7 / span 3; --slide-from: 60px; }
.gz-hero-stage .num .figure{
  font-family: "JetBrains Mono", monospace !important;
  font-size: clamp(30px,3.4vw,44px);
  color: var(--cyan); font-weight: 700 !important;
}
.gz-hero-stage .num .label{
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gz-mist); margin-top: 6px;
}

/* small cream offcut panel, purely compositional */
.gz-hero-stage .offcut{
  grid-column: 10 / span 3;
  grid-row: 5 / span 3;
  --slide-from: 120px; --rot-from: 3deg; --rot-to: 1deg;
}

@media (max-width: 820px){
  .gz-hero-stage .stage{ grid-template-columns: 1fr; grid-auto-rows: auto; padding: 56px 24px 64px; gap: 16px; }
  .gz-hero-stage .headline, .gz-hero-stage .accent, .gz-hero-stage .num, .gz-hero-stage .offcut{
    grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 140px;
  }
  .gz-hero-stage .accent{ min-height: 90px; }
  .gz-hero-stage .offcut{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .gz-assemble-scope .panel{ opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .gz-assemble-scope .panel.accent.is-locked::before{ animation: none !important; }
}

/* ===== Case studies — paper-cut panel row (replaces the old horizontal-
 * scroll .gz-cs-scroller mechanic) ===== */
.gz-cs-stage{ background: #fff; padding: 72px 24px; }
.gz-cs-inner{ max-width: 1200px; margin: 0 auto; }
.gz-cs-row{ display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.gz-cs-row .panel{ flex: 1 1 220px; max-width: 260px; padding: 26px 22px; text-decoration: none; border-radius: 2px; }
.gz-cs-row .panel.dark{ background: var(--gz-charcoal); }
.gz-cs-row .panel.cream{ background: var(--gz-cream); border: 1px solid rgba(20,24,27,.12); box-shadow: 0 6px 16px -8px rgba(20,24,27,.18), 0 1px 0 rgba(20,24,27,.05); }
.gz-cs-row .panel.accent{ background: var(--gz-blue); }
.gz-cs-row .tag{ font-family: "Outfit", sans-serif !important; font-weight: 600 !important; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; opacity: .75; }
.gz-cs-row .num{ font-family: "JetBrains Mono", monospace !important; font-size: 30px; font-weight: 700 !important; margin-bottom: 8px; }
.gz-cs-row .desc{ font-size: 12.5px; line-height: 1.5; }
.gz-cs-row .panel.dark .tag, .gz-cs-row .panel.dark .desc{ color: var(--gz-mist); }
.gz-cs-row .panel.dark .num{ color: var(--gz-blue-light); }
.gz-cs-row .panel.cream .tag, .gz-cs-row .panel.cream .desc{ color: var(--gz-muted); }
.gz-cs-row .panel.cream .num{ color: var(--gz-ink); }
.gz-cs-row .panel.accent .tag, .gz-cs-row .panel.accent .desc, .gz-cs-row .panel.accent .num{ color: var(--gz-void); }

/* ===== Trusted-by marquee — one panel, whole strip locks together ===== */
.gz-marquee-stage{ background: var(--gz-cream); padding: 72px 24px; }
.gz-marquee-inner{ max-width: 1080px; margin: 0 auto; }
.mq-panel{ background: var(--gz-charcoal); border-radius: 2px; padding: 28px 8px; }
.mq-panel .gz-marquee{ margin: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-panel .gz-marquee-track{ display: flex; width: max-content; gap: 48px; animation: gz-marquee 28s linear infinite; }
.mq-panel .gz-marquee:hover .gz-marquee-track{ animation-play-state: paused; }
.mq-panel .gz-marquee-track span{ white-space: nowrap; font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--gz-mist); opacity: .85; }
@keyframes gz-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .mq-panel .gz-marquee-track{ animation: none; } }

/* ===== Client logo strip -- real logos, one shared white chip so the
 * handful with their own solid-color source backgrounds (OBSBOT red,
 * Roaring Bowls pink, Graffiti Geckos black) don't show as raw color
 * blocks next to the transparent ones. Grayscale + reduced opacity on
 * every logo uniformly is the actual "black and white" treatment --
 * more robust than relying on each source file already being mono. ===== */
.gz-client-strip{ padding: 48px 24px; }
.gz-client-track-wrap{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.gz-client-track{ display: flex; align-items: center; width: max-content; gap: 22px; animation: gz-marquee 36s linear infinite; }
.gz-client-track:hover{ animation-play-state: paused; }
.gz-client-chip{
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 148px; height: 76px; padding: 14px 20px;
  background: #fff; border-radius: 4px; border: 1px solid rgba(20,24,27,.1);
  box-shadow: 0 4px 14px -10px rgba(20,24,27,.25);
}
.gz-client-chip img, .gz-client-chip svg{
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  filter: grayscale(1); opacity: .68; transition: opacity .2s ease, filter .2s ease;
}
.gz-client-chip:hover img, .gz-client-chip:hover svg{ filter: grayscale(0); opacity: 1; }
/* Reduced motion: stop the loop and let the (still-doubled, for the
   seamless-loop trick) track scroll horizontally instead of wrapping --
   wrapping would visibly show the duplicated second pass as repeats. */
@media (prefers-reduced-motion: reduce){
  .gz-client-track{ animation: none; }
  .gz-client-track-wrap{ overflow-x: auto; }
}
@media (max-width: 640px){ .gz-client-chip{ width: 118px; height: 62px; padding: 10px 14px; } }

/* ===== Header — deliberate decision: gets a matching entrance, but
 * ONE-TIME on page load, not scroll-triggered like section panels. It's
 * persistent/sticky chrome, not content the visitor scrolls past — playing
 * the slide-and-lock mechanic on every scroll pass would either fight the
 * sticky positioning or repeat the effect oddly. Same easing/blur-clear
 * language as everything else, just a different (load, not scroll)
 * trigger — intentional, not left untouched by default. ===== */
.site-header{
  opacity: 0;
  transform: translateY(-36px);
  filter: blur(4px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), filter .7s cubic-bezier(.16,1,.3,1);
}
.site-header.gz-header-locked{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce){
  .site-header{ opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* !important required: Kadence's own theme CSS ships higher-specificity
 * body/heading font rules (loaded via customizer output after this
 * stylesheet), so a plain body{} rule here silently loses the cascade —
 * confirmed via computed-style inspection, not assumed. Body rule first,
 * heading rule after (source order breaks the !important vs !important
 * tie in the heading rule's favor for h1-h6). */
body, body *{
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 500 !important;
}

h1, h2, h3, h4, h5, h6, .gz-section-title h2{
  font-family: "Outfit", -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 700 !important;
}

/* Every eyebrow/kicker/label element sitewide, canonical class or not —
   per Brand-Guidelines_v4: Outfit 600 for eyebrow/label text, never Inter
   (falls through to the body default above) and never mono (reserved for
   numbers only). Kept separate from the h1-h6 rule above because labels
   are 600 weight, headlines are 700-800 — same family, different weight,
   was previously the same rule and always lost this 600 to the h1-h6
   !important 700 (dead code, reproduced live). Individual component
   classes (.gz-about2-eyebrow, .gz-contact-kicker, .gz-spec-eyebrow,
   .gz-pkgd-kicker, .gz-cta-eyebrow, etc.) now also self-declare Outfit
   600 !important directly so they don't depend on being listed here —
   this list only needs to cover the shared .gz-eyebrow/.k classes. */
.gz-eyebrow, .k{
  font-family: "Outfit", -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 600 !important;
}

/* Numbers-only monospace: prices, stats, page numbers — never labels/taglines. */
.woocommerce-Price-amount, .gz-stat-num, p.price, .amount, .stat .num, .gz-stats .num,
.gz-cs-card .num, .gz-dash-num{
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace !important;
  font-weight: 700 !important;
}

/* Brand blue (#21ABDA) fails AA contrast on the cream background — use the
 * darker secondary blue for any blue text sitting on cream/light surfaces.
 * .gz-eyebrow is NOT included here: every real usage sitewide sits on a
 * dark hero panel, where its base --gz-blue-light color is already correct
 * — this rule used to force it to the dark variant unconditionally, which
 * made every page eyebrow near-invisible against its own dark background. */
.gz-section.light .k, .gz-section:not([style*="background:#14181B"]) .k{
  color: var(--gz-blue-dark);
}

/* ===== WooCommerce single product — bring Kadence's default into our design system ===== */
body.single-product #content,
body.single-product .site-main{
  background: var(--gz-cream);
  padding-top: 40px;
  padding-bottom: 60px;
}
body.single-product .woocommerce-breadcrumb{
  font-size: 12px;
  color: var(--gz-muted);
  margin-bottom: 24px;
}
body.single-product .woocommerce-breadcrumb a{ color: var(--gz-muted); }
body.single-product div.product:not(.gz-product-page){
  background: #fff;
  border: 1px solid var(--gz-line);
  border-radius: 2px;
  padding: 40px;
  box-shadow: 0 1px 3px rgba(20,24,27,.04);
}
body.single-product .woocommerce-product-gallery img{
  border-radius: 2px;
  border: 1px solid var(--gz-line);
}
body.single-product .product_title{
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  color: var(--gz-ink) !important;
}
body.single-product p.price,
body.single-product p.price span.woocommerce-Price-amount{
  color: var(--gz-blue-dark) !important;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 26px !important;
  font-weight: 700;
}
body.single-product .woocommerce-product-details__short-description{
  color: var(--gz-muted);
  font-size: 14px;
  line-height: 1.6;
  padding: 16px 0;
  border-top: 1px solid var(--gz-line);
  border-bottom: 1px solid var(--gz-line);
  margin: 16px 0;
}
body.single-product .single_add_to_cart_button,
body.single-product button.single_add_to_cart_button{
  background: var(--gz-blue) !important;
  color: var(--gz-ink) !important;
  border-radius: 2px !important;
  font-weight: 600 !important;
  padding: 14px 28px !important;
  border: none !important;
  font-size: 14px !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.single-product .single_add_to_cart_button:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(21,146,184,.28);
}
body.single-product .product_meta{
  font-size: 12px;
  color: var(--gz-muted);
  margin-top: 20px;
}
body.single-product .product_meta a,
body.single-product .product_meta span.sku{ color: var(--gz-muted) !important; }
body.single-product .product_meta a{ color: var(--gz-blue-dark) !important; }
body.single-product .woocommerce-tabs ul.tabs li a{
  color: var(--gz-muted);
  font-weight: 600;
}
body.single-product .woocommerce-tabs ul.tabs li.active a{ color: var(--gz-blue-dark); }
body.single-product .woocommerce-Tabs-panel{
  font-size: 14px;
  line-height: 1.7;
  color: var(--gz-ink);
}
body.single-product .related.products{
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--gz-line);
}
body.single-product .related.products > h2{
  font-size: 18px;
  margin-bottom: 20px;
}
body.single-product .related.products .woocommerce-loop-product__title{
  color: var(--gz-ink) !important;
  font-size: 14px;
}
body.single-product .related.products .price{ color: var(--gz-blue-dark) !important; font-weight: 700; }
body.single-product ul.products li.product{
  background: #fff;
  border: 1px solid var(--gz-line);
  border-radius: 2px;
  padding: 16px !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
body.single-product ul.products li.product:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(20,24,27,.08);
}
body.single-product ul.products li.product img{ border-radius: 2px; }

/* Master rebuild §3 — About page: narrative structure, not a 4-box grid */
.gz-story-p{ font-size: 17px; line-height: 1.75; color: var(--gz-ink); margin: 0 0 22px; }
.gz-story-p:first-of-type::first-letter{ font-family: "Outfit", sans-serif; font-size: 52px; font-weight: 700; float: left; line-height: .8; margin: 6px 8px 0 0; color: var(--gz-blue-dark); }

/* Timeline strip replaces a plain drop-cap paragraph — a real design
   idea tied to the section's own "more than a decade" point: a vertical
   2014→Now marker running alongside the copy, not decorative type. */
/* ===================================================================
 * GZ-ABOUT2 — a manifesto, not another hero-stage + card-grid page.
 * Oversized editorial type, ghost numerals, generous vertical rhythm —
 * statements given room to breathe instead of boxed into cards shared
 * with every other rebuilt page.
 * =================================================================== */
.gz-about2-scope{ background: var(--gz-cream); }
.gz-about2-hero{ padding: 84px 24px 56px; text-align: center; }
.gz-about2-hero-inner{ max-width: 780px; margin: 0 auto; }
.gz-about2-eyebrow{ display: inline-block; font-family: "Outfit", sans-serif !important; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gz-amber-deep); font-weight: 600 !important; margin-bottom: 20px; }
.gz-about2-hero-inner h1{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(34px,6vw,64px); line-height: 1.04; letter-spacing: -.015em; color: var(--gz-ink); margin: 0 0 24px; text-wrap: balance; }
.gz-about2-hero-sub{ font-size: 17px; line-height: 1.6; color: var(--gz-muted); max-width: 56ch; margin: 0 auto; }

.gz-about2-story{ padding: 8px 24px 64px; }
.gz-about2-story-inner{ max-width: 740px; margin: 0 auto; border-top: 1px solid var(--gz-line); padding-top: 36px; }
.gz-about2-story-span{ display: block; font-family: "Outfit", sans-serif !important; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gz-blue-dark); font-weight: 600 !important; margin-bottom: 18px; }
.gz-about2-story-lede{ font-family: "Outfit", sans-serif; font-weight: 600; font-size: clamp(19px,2.4vw,25px); line-height: 1.45; color: var(--gz-ink); margin: 0 0 22px; text-wrap: balance; }
.gz-about2-story-inner p{ font-size: 15.5px; line-height: 1.7; color: var(--gz-muted); margin: 0 0 28px; max-width: 68ch; }
.gz-about2-story-stats{ display: flex; gap: 40px; flex-wrap: wrap; padding-top: 22px; border-top: 1px dashed var(--gz-line); }
.gz-about2-story-stats div{ display: flex; flex-direction: column; }
.gz-about2-story-stats b{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: 30px; color: var(--gz-blue-dark); line-height: 1; }
.gz-about2-story-stats span{ font-size: 11.5px; color: var(--gz-muted); margin-top: 6px; max-width: 18ch; }

.gz-about2-manifesto{ max-width: 900px; margin: 0 auto; padding: 40px 24px 24px; }
.gz-about2-manifesto-head{ text-align: center; margin-bottom: 12px; }
.gz-about2-manifesto-head .k{ font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gz-blue-dark); font-weight: 700; }
.gz-about2-manifesto-head h2{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(24px,3.4vw,32px); margin: 8px 0 0; }
.gz-about2-tenet{ position: relative; display: flex; align-items: flex-start; gap: 28px; padding: 34px 0; border-bottom: 1px solid var(--gz-line); }
.gz-about2-tenet:last-child{ border-bottom: none; }
.gz-about2-tenet-num{ flex: none; font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(44px,6vw,64px); line-height: 1; color: rgba(11,78,104,.14); }
.gz-about2-tenet-body h3{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 20px; margin: 6px 0 8px; color: var(--gz-ink); }
.gz-about2-tenet-body p{ font-size: 14.5px; line-height: 1.65; color: var(--gz-muted); margin: 0; max-width: 62ch; }
@media (max-width: 560px){ .gz-about2-tenet{ gap: 18px; } .gz-about2-tenet-num{ font-size: 34px; } }

.gz-process-horizontal{ display: flex; gap: 0; border-top: 1px solid var(--gz-line); }
.gz-process-step{ flex: 1; padding: 24px 20px 0; position: relative; }
.gz-process-step::before{ content: ''; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--gz-blue); transition: width .3s ease; }
.gz-process-step:not(:last-child){ border-right: 1px solid var(--gz-line); }
.gz-process-step .dot{
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--gz-blue); color: #fff; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 13px; margin-bottom: 14px;
}
.gz-process-step h3{ font-size: 15px; margin: 0 0 8px; }
.gz-process-step p{ font-size: 12.5px; color: var(--gz-muted); line-height: 1.6; margin: 0; }
@media (max-width: 760px){ .gz-process-horizontal{ flex-direction: column; } .gz-process-step:not(:last-child){ border-right: none; border-bottom: 1px solid var(--gz-line); padding-bottom: 24px; } }

/* About — How We Communicate comparison + Where AI Fits In grid */
/* padding-bottom is 80px, not the symmetric 40px top uses on purpose --
   the seam connector right after this section pulls -64px up into
   whatever precedes it (see .gz-seam-down); 40px of clearance let it
   overshoot 24px past this section's own padding and land the icon
   directly on top of .gz-about2-comm-note's text, confirmed live. 80px
   leaves real breathing room instead of a razor-thin, easily-broken fit. */
.gz-about2-comm{ max-width: 900px; margin: 0 auto; padding: 40px 24px 80px; }
.gz-about2-comm-head{ text-align: center; margin-bottom: 32px; }
.gz-about2-comm-head .k{ font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gz-blue-dark); font-weight: 700; }
.gz-about2-comm-head h2{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(24px,3.4vw,32px); margin: 8px 0 0; }
.gz-about2-comm-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--gz-line); border-bottom: 1px solid var(--gz-line); }
.gz-about2-comm-col{ padding: 30px 32px; }
.gz-about2-comm-col:first-child{ border-right: 1px solid var(--gz-line); }
.gz-about2-comm-label{ display: block; font-family: "Outfit", sans-serif !important; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600 !important; color: var(--gz-muted); margin-bottom: 18px; }
.gz-about2-comm-col.is-us .gz-about2-comm-label{ color: var(--gz-blue-dark); }
.gz-about2-comm-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.gz-about2-comm-col li{ font-size: 15px; line-height: 1.55; padding-left: 22px; position: relative; color: var(--gz-ink); opacity: .65; }
.gz-about2-comm-col li::before{ content: '\2715'; position: absolute; left: 0; color: var(--gz-muted); font-weight: 700; font-size: 12px; top: 3px; }
.gz-about2-comm-col.is-us li{ opacity: 1; }
.gz-about2-comm-col.is-us li::before{ content: '\2713'; color: var(--gz-blue-dark); }
.gz-about2-comm-note{ text-align: center; max-width: 64ch; margin: 28px auto 0; font-size: 15px; line-height: 1.7; color: var(--gz-muted); }
.gz-about2-comm-note strong{ color: var(--gz-ink); }
@media (max-width: 640px){ .gz-about2-comm-cols{ grid-template-columns: 1fr; } .gz-about2-comm-col:first-child{ border-right: none; border-bottom: 1px solid var(--gz-line); } }

.gz-about2-ai{ background: var(--gz-charcoal); color: #F2F0EA; padding: 56px 24px; }
.gz-about2-ai-head{ max-width: 640px; margin: 0 auto 36px; text-align: center; }
.gz-about2-ai-head .k{ font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gz-amber-light); font-weight: 700; }
.gz-about2-ai-head h2{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(24px,3.4vw,32px); margin: 8px 0 16px; color: #F2F0EA; }
.gz-about2-ai-head p{ font-size: 15px; line-height: 1.7; color: var(--gz-mist); margin: 0; }
.gz-about2-ai-list{ max-width: 780px; margin: 0 auto; }
.gz-about2-ai-row{ display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid rgba(242,240,234,.14); }
.gz-about2-ai-row:last-child{ border-bottom: 1px solid rgba(242,240,234,.14); }
.gz-about2-ai-row dt{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 16px; color: #F2F0EA; }
.gz-about2-ai-row dd{ margin: 0; font-size: 14px; line-height: 1.65; color: var(--gz-mist); }
.gz-about2-ai-row .tag{ display: inline-block; font-family: "Outfit", sans-serif !important; font-size: 10px; font-weight: 600 !important; letter-spacing: .04em; text-transform: uppercase; color: var(--gz-amber-light); background: rgba(232,180,79,.12); padding: 3px 10px; border-radius: 20px; margin: 0 0 8px; }
@media (max-width: 700px){ .gz-about2-ai-row{ grid-template-columns: 1fr; gap: 6px; } }

.gz-about2-process{ max-width: 1080px; margin: 0 auto; padding: 56px 24px; }
.gz-about2-process-head{ text-align: center; margin-bottom: 36px; }
.gz-about2-process-head .k{ font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gz-blue-dark); font-weight: 700; }
.gz-about2-process-head h2{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(24px,3.4vw,32px); margin: 8px 0 0; }
.gz-about2-process-row{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.gz-about2-process-step{ padding: 0 22px; border-left: 1px solid var(--gz-line); }
.gz-about2-process-step:first-child{ border-left: none; padding-left: 0; }
.gz-about2-process-step .num{ display: block; font-family: "Outfit", sans-serif; font-weight: 800; font-size: 15px; color: var(--gz-amber-deep); margin-bottom: 12px; }
.gz-about2-process-step h3{ font-size: 16px; margin: 0 0 8px; color: var(--gz-ink); }
.gz-about2-process-step p{ font-size: 13px; line-height: 1.6; margin: 0; color: var(--gz-muted); }
@media (max-width: 800px){ .gz-about2-process-row{ grid-template-columns: 1fr 1fr; gap: 28px 0; } .gz-about2-process-step{ border-left: none; padding-left: 0; } }
@media (max-width: 480px){ .gz-about2-process-row{ grid-template-columns: 1fr; } }

.gz-about2-toolkit{ background: var(--gz-tint); padding: 56px 24px; }
.gz-about2-toolkit-inner{ max-width: 700px; margin: 0 auto; text-align: center; }
.gz-about2-toolkit-inner .k{ font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gz-blue-dark); font-weight: 700; }
.gz-about2-toolkit-inner h2{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(24px,3.4vw,32px); margin: 8px 0 12px; }
.gz-about2-toolkit-inner > p{ font-size: 14px; color: var(--gz-muted); margin: 0 0 28px; }
.gz-about2-toolkit-tags{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.gz-about2-toolkit-tags span{ font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--gz-ink); background: #fff; border: 1px solid var(--gz-line); border-radius: 999px; padding: 6px 14px; }

/* Master rebuild §3 — Services hub: distinct visual zone per category */

/* Zone 1: bundled packages, dark featured cards */
.gz-zone-bundles{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gz-bundle-card{
  display: block; padding: 32px; border-radius: 2px; text-decoration: none;
  background: linear-gradient(160deg, #2A3338, var(--gz-charcoal)); border: 1px solid #3A444A;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 28px -16px rgba(0,0,0,.5);
  transition: transform .18s ease, border-color .18s ease;
}
.gz-bundle-card:hover{ transform: translateY(-4px); border-color: var(--gz-blue-light); }
.gz-bundle-card .tag{ display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gz-blue-light); border: 1px solid #2C4750; border-radius: 999px; padding: 4px 12px; margin-bottom: 16px; }
.gz-bundle-card h3{ color: #F2F0EA; font-size: 19px; font-weight: 700; margin: 0 0 20px; line-height: 1.35; }
.gz-bundle-card .range{ display: block; font-family: "JetBrains Mono", monospace; font-size: 17px; font-weight: 700; color: var(--gz-blue-light); margin-bottom: 18px; }
.gz-bundle-card .cta{ font-size: 13px; font-weight: 600; color: #F2F0EA; }
@media (max-width: 760px){ .gz-zone-bundles{ grid-template-columns: 1fr; } }

/* Zone 2: website dev/maintenance split */
.gz-zone-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 2px; overflow: hidden; border: 1px solid var(--gz-line); }
.gz-split-half{ padding: 36px 32px; background: #fff; }
.gz-split-half.alt{ background: var(--gz-tint); }
.gz-split-half .k{ font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gz-blue-dark); }
.gz-split-half h3{ font-size: 20px; margin: 8px 0 12px; }
.gz-split-half p{ font-size: 13.5px; color: var(--gz-muted); line-height: 1.6; margin: 0 0 16px; }
.gz-link-arrow{ font-size: 13px; font-weight: 700; color: var(--gz-blue-dark); text-decoration: none; }
@media (max-width: 760px){ .gz-zone-split{ grid-template-columns: 1fr; } }

/* Zone 3: AI services — flat panels, no glow/gradient (SaaS tell, forbidden) */
.gz-zone-ai{ background: var(--gz-charcoal); }
.gz-ai-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gz-ai-card{ position: relative; padding: 30px; border-radius: 2px; background: var(--gz-charcoal); border: 1px solid #3A444A; box-shadow: 0 10px 24px -16px rgba(0,0,0,.6); overflow: hidden; }
.gz-ai-card h3{ color: #F2F0EA; font-size: 18px; margin: 0 0 10px; position: relative; }
.gz-ai-card p{ color: var(--gz-mist); font-size: 13px; line-height: 1.6; margin: 0 0 14px; position: relative; }
.gz-ai-card .range{ font-family: "JetBrains Mono", monospace; font-size: 15px; font-weight: 700; color: var(--gz-blue-light); position: relative; }
@media (max-width: 760px){ .gz-ai-row{ grid-template-columns: 1fr; } }

/* Zone 4: standalone ladders — dense list */
.gz-ladder-list{ display: flex; flex-direction: column; border-top: 1px solid var(--gz-line); }
.gz-ladder-row{
  display: flex; align-items: center; gap: 16px; padding: 15px 6px; border-bottom: 1px solid var(--gz-line);
  text-decoration: none; color: var(--gz-ink); transition: background .15s ease, padding-left .15s ease;
}
.gz-ladder-row:hover{ background: rgba(33,171,218,.06); padding-left: 12px; }
.gz-ladder-row .idx{ font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--gz-muted); width: 22px; flex: none; }
.gz-ladder-row .name{ flex: 1; font-size: 14px; font-weight: 600; }
.gz-ladder-row .arrow{ color: var(--gz-blue-dark); font-size: 14px; }

/* Zone 4 (Services hub) — real card grid, not a bare list. .gz-ladder-list/
 * .gz-ladder-row above stay untouched (About page's Toolkit section still
 * uses them); this is a separate, richer component. */
/* Flex, not grid auto-fill — see .gz-home-svc-grid above for why: an
 * auto-fill grid strands a ragged last row on the left with dead space
 * on the right whenever the item count doesn't divide evenly. */
.gz-ladder-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.gz-ladder-card{
  flex: 1 1 220px; max-width: 280px;
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-radius: 2px;
  text-decoration: none;
  transition: transform .15s ease;
}
.gz-ladder-card::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: inherit; border-radius: inherit;
  clip-path: url(#gz-clip-btn);
  box-shadow: 0 8px 20px -12px rgba(20,24,27,.3);
}
.gz-ladder-card:hover{ transform: translateY(-2px); }
.gz-ladder-card.dark{ background: var(--gz-charcoal); color: #F2F0EA; }
/* "paper" tone was literally #fff on a #fff section — real white-on-white,
 * only saved by a thin 1px border. Uses the deeper --gz-tint cream now so
 * it reads as a distinct object against --gz-cream page ground. */
.gz-ladder-card.paper{ background: var(--gz-tint); color: var(--gz-ink); }
.gz-ladder-card.paper::before{ box-shadow: 0 8px 20px -12px rgba(20,24,27,.3), 0 0 0 1px rgba(20,24,27,.14); }
.gz-ladder-card.accent{ background: var(--gz-blue); color: var(--gz-ink); }
.gz-ladder-card .idx{ font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; flex: none; opacity: .85; }
.gz-ladder-card .name{ flex: 1; font-size: 13.5px; font-weight: 700; }
.gz-ladder-card .arrow{ font-size: 14px; flex: none; opacity: .8; }

/* Zone 5: branding — editorial split with real portfolio tiles */
.gz-zone-branding{ display: grid; grid-template-columns: .8fr 1.2fr; gap: 32px; align-items: center; }
.gz-branding-text p{ font-size: 15px; line-height: 1.6; color: var(--gz-muted); margin: 0 0 16px; }
.gz-branding-text .range{ display: block; font-family: "JetBrains Mono", monospace; font-size: 18px; font-weight: 700; color: var(--gz-blue-dark); margin-bottom: 14px; }
.gz-branding-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gz-branding-tile{ aspect-ratio: 4/3; border-radius: 2px; overflow: hidden; background: var(--gz-line); }
@media (max-width: 760px){ .gz-zone-branding{ grid-template-columns: 1fr; } }

/* Zone 6: print & signage — single compact card */
.gz-print-card{
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 22px 28px; border-radius: 2px; background: #fff; border: 1px solid var(--gz-line);
  box-shadow: 0 10px 24px -16px rgba(20,24,27,.3);
  text-decoration: none; color: var(--gz-ink);
}
.gz-print-card span:first-child{ font-size: 13.5px; color: var(--gz-muted); flex: 1; min-width: 220px; }
.gz-print-card .range{ font-family: "JetBrains Mono", monospace; font-weight: 700; color: var(--gz-blue-dark); font-size: 13px; }

/* Master rebuild §2 — product hero band, tier ladder, post-purchase timeline */
.gz-product-hero-band{ display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.gz-hero-cat{ font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gz-blue-dark); }
.gz-tier-badge{ display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; border: 1px solid; }
/* Leads ahead of .gz-positioning-line below it: what the visitor actually
   gets, in plain terms, before the structural "which catalog shelf this
   sits on" fact. */
.gz-benefit-hook{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 19px; line-height: 1.35; color: var(--gz-ink); margin: 2px 0 8px; text-wrap: balance; }
.gz-positioning-line{ font-size: 13px; color: var(--gz-muted); margin: 0 0 18px; font-style: italic; }

.gz-tier-ladder{ margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--gz-line); }
.gz-tier-ladder h4{ font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gz-muted); margin: 0 0 12px; font-weight: 700; }
.gz-tier-ladder-row{ display: flex; gap: 8px; }
.gz-tier-ladder-step{
  flex: 1; text-align: center; padding: 12px 8px; border-radius: 2px; text-decoration: none;
  background: color-mix(in srgb, var(--tc) 10%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent);
  color: var(--gz-ink); font-size: 12px; font-weight: 700;
}
.gz-tier-ladder-step .price{ display: block; font-family: "JetBrains Mono", monospace; font-size: 13px; margin-top: 4px; color: var(--tc); }
.gz-tier-ladder-step.is-current{ background: var(--tc); color: var(--gz-ink); box-shadow: 0 4px 14px color-mix(in srgb, var(--tc) 40%, transparent); }
.gz-tier-ladder-step.is-current .price{ color: var(--gz-ink); }

.gz-post-purchase-timeline{ margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--gz-line); }
.gz-post-purchase-timeline h4{ font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gz-muted); margin: 0 0 14px; font-weight: 700; }
.gz-timeline-row{ display: flex; flex-direction: column; gap: 14px; }
.gz-timeline-step{ display: flex; gap: 12px; align-items: flex-start; }
.gz-timeline-step .n{
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--gz-blue); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace;
}
.gz-timeline-step strong{ font-size: 13px; display: block; margin-bottom: 2px; }
.gz-timeline-step p{ font-size: 12.5px; color: var(--gz-muted); margin: 0; line-height: 1.5; }

/* Premium layout pass: two-column feel, trust strip, richer description
 * typography for the new h3/ul long-description content, quick-facts card. */
/* Old two-column grid — only for the pre-panel product page structure.
 * .gz-product-page (the new paper-cut template's outer wrapper) still
 * carries the "product" class via wc_product_class(), so it would
 * otherwise inherit this grid too — explicitly excluded below since the
 * new template provides its own layout via .gz-product-hero-row. */
body.single-product div.product:not(.gz-product-page){
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  padding: 48px;
}
@media (max-width: 782px){
  body.single-product div.product:not(.gz-product-page){ grid-template-columns: 1fr; gap: 24px; padding: 24px; }
}
body.single-product div.product.gz-product-page{
  background: transparent; border: none; box-shadow: none; padding: 0; border-radius: 0;
}
body.single-product .woocommerce-product-gallery{
  position: sticky;
  top: 100px;
  align-self: start;
}
body.single-product .woocommerce-product-gallery img{
  box-shadow: 0 20px 40px -12px rgba(20,24,27,.18);
}

/* A real number right before the buy decision, not after it. */
.gz-buy-proof{
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; font-weight: 700;
  letter-spacing: .01em; color: var(--gz-blue-dark); margin: 0 0 10px;
}

/* Trust strip under the Add to Cart button — response time, delivery, support. */
.gz-trust-strip{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px dashed var(--gz-line);
}
.gz-trust-item{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--gz-muted);
  font-weight: 600;
  white-space: nowrap;
}
.gz-trust-item svg{ flex: none; color: var(--gz-blue-dark); }

/* Quick-facts card, pulled below product_meta */
.gz-quickfacts{
  margin-top: 24px;
  background: var(--gz-cream);
  border: 1px solid var(--gz-line);
  border-radius: 2px;
  padding: 18px 20px;
}
.gz-quickfacts h4{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gz-muted);
  margin: 0 0 10px;
}
.gz-quickfacts dl{ display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.gz-quickfacts dt{ font-size: 13px; color: var(--gz-muted); }
.gz-quickfacts dd{ font-size: 13px; color: var(--gz-ink); font-weight: 600; margin: 0; text-align: right; }

/* Long-description typography: the Description tab now ships real h3/ul
 * structure (What's included / How it works / Who this is for / Billing) —
 * style it like a real content section, not default WooCommerce plaintext. */
body.single-product .woocommerce-Tabs-panel h3{
  font-size: 15px;
  font-weight: 700;
  color: var(--gz-ink);
  margin: 28px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--gz-line);
}
body.single-product .woocommerce-Tabs-panel h3:first-child{ margin-top: 0; padding-top: 0; border-top: none; }
body.single-product .woocommerce-Tabs-panel ul{
  margin: 0 0 8px;
  padding-left: 0;
  list-style: none;
}
body.single-product .woocommerce-Tabs-panel ul li{
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 14px;
  color: var(--gz-ink);
}
body.single-product .woocommerce-Tabs-panel ul li::before{
  content: "";
  position: absolute;
  left: 2px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--gz-blue-light);
}
body.single-product .woocommerce-Tabs-panel p{ margin: 0 0 8px; color: var(--gz-muted); }

/* ===== Cart, Checkout, My Account — bring WooCommerce defaults into our design system ===== */
body.woocommerce-cart #content,
body.woocommerce-checkout #content,
body.woocommerce-account #content,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-account .site-main{
  background: var(--gz-cream);
  padding-top: 32px;
  padding-bottom: 60px;
}
/* Kadence's default link color (var(--global-palette-highlight), a light
 * cyan) fails contrast on these light backgrounds — showlogin/showcoupon
 * toggles, privacy-policy link, etc. #content doesn't actually wrap this
 * markup in Kadence's structure — .woocommerce does. */
body.woocommerce-cart .woocommerce a:not(.gz-btn):not(.button),
body.woocommerce-checkout .woocommerce a:not(.gz-btn):not(.button),
body.woocommerce-account .woocommerce a:not(.gz-btn):not(.button){
  color: var(--gz-blue-dark);
}
/* WooCommerce's own default form buttons (login/register on My Account,
 * etc.) — same white-on-cyan issue as everywhere else. */
body.woocommerce-account .woocommerce-button.button,
body.woocommerce-account button.woocommerce-form-login__submit{
  background: var(--gz-blue) !important;
  color: var(--gz-ink) !important;
}
body.woocommerce-cart h1.entry-title,
body.woocommerce-checkout h1.entry-title,
body.woocommerce-account h1.entry-title{
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--gz-ink) !important;
  letter-spacing: -.01em;
  max-width: 1080px;
  margin: 0 auto 24px !important;
  padding: 0 24px;
}

/* The old plain-bordered cart/checkout table block that used to live here
   is gone — it predates the "ticket stub" hand-cut cart rebuild below
   (.woocommerce-cart-form) and the checkout order-review panel
   (#order_review), and its !important rules had higher specificity than
   both, so it was silently winning: forcing back a solid table border,
   14px/16px padding instead of the intended 22px/10px, an unwanted
   border-top on every row, and a permanently-red remove icon instead of
   the muted-grey/hover-red the new design calls for. Checkout's own
   #order_review rules already override table.shop_table more
   specifically (ID selector), so nothing there depended on this block
   either — it was dead weight actively fighting the cart specifically. */
/* Order review — the same "featured card" recipe as .gz-combo-card /
   the cart totals box above (solid border + badge tag on dark ground),
   not the hand-cut clip-path system Quick Launch's own cards don't use
   either. */
body.woocommerce-checkout #order_review{
  position: relative;
  background: var(--gz-charcoal) !important; color: #F2F0EA;
  border: 2px solid var(--gz-blue) !important; border-radius: 2px; padding: 32px 30px 28px !important;
}
body.woocommerce-checkout #order_review_heading{
  display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 10.5px !important; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: #fff !important; background: var(--gz-blue-dark);
  padding: 5px 12px; margin-bottom: 18px;
}
body.woocommerce-checkout #order_review table.shop_table{ background: transparent !important; border: none !important; border-collapse: collapse; width: 100%; }
body.woocommerce-checkout #order_review table.shop_table th{ background: transparent !important; color: var(--gz-blue-light) !important; font-weight: 600; text-align: left; }
body.woocommerce-checkout #order_review table.shop_table td{ color: var(--gz-mist) !important; border-top-color: rgba(242,240,234,.15) !important; text-align: right; font-family: "JetBrains Mono", monospace; }
/* Checkout's order table shows real product names (unlike cart's totals
   box, which only ever has Subtotal/Total labels) — a long name plus a
   price in a 440px box with no column sizing overflowed the box,
   clipping the price. Product name gets room to wrap; the price column
   gets a reserved minimum so it's never the thing that gets squeezed. */
body.woocommerce-checkout #order_review table.shop_table th:first-child,
body.woocommerce-checkout #order_review table.shop_table td:first-child{
  word-break: break-word; padding-right: 12px;
}
body.woocommerce-checkout #order_review table.shop_table th:last-child,
body.woocommerce-checkout #order_review table.shop_table td:last-child{
  white-space: nowrap; min-width: 70px;
}
/* Privacy-policy text (woocommerce_checkout_before_order_review) and any
   other plain paragraph WooCommerce prints inside the dark order-review
   box — was inheriting a color meant for a light background, unreadable
   against the charcoal here. */
body.woocommerce-checkout #order_review p,
body.woocommerce-checkout .woocommerce-checkout-review-order p{
  color: var(--gz-mist) !important; font-size: 12.5px; line-height: 1.6;
}
body.woocommerce-checkout #order_review p a{ color: var(--gz-blue-light) !important; }
body.woocommerce-checkout #order_review .order-total{ display: block; margin-top: 10px; padding-top: 10px; border-top: none !important; }
body.woocommerce-checkout #order_review .order-total th,
body.woocommerce-checkout #order_review .order-total td{
  display: block; width: 100%; text-align: left; border: none !important; padding: 0;
}
body.woocommerce-checkout #order_review .order-total th{
  font-family: "JetBrains Mono", monospace; font-size: 10.5px !important; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gz-mist) !important; font-weight: 600; margin-bottom: 6px;
}
body.woocommerce-checkout #order_review .order-total td{
  color: #fff !important; font-size: 36px !important; font-weight: 800; line-height: 1;
}
/* Billing form — same white-card recipe as the Quick Launch grid: thin
   border, soft lifted shadow, 2px radius. Not clip-path.
   .col-2 gets the same card: this site sells services, not shipped
   goods, so .col-2 never has real shipping fields in it — it's just
   "Additional information / Order notes" (order notes render into
   .col-2 via WooCommerce's own form-shipping.php, even with nothing to
   ship). Left uncarded before, it sat directly on the cream background
   looking like a stray unstyled block under the real billing card,
   reproduced live. */
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2:has(.woocommerce-additional-fields){
  position: relative; background: #fff;
  border: 1px solid var(--gz-line); border-radius: 2px;
  padding: 30px 28px 26px; box-shadow: 0 10px 24px -16px rgba(20,24,27,.25);
}
body.woocommerce-checkout #customer_details .col-2:has(.woocommerce-additional-fields) h3{
  font-family: "Outfit", sans-serif !important; font-weight: 800 !important; font-size: 19px !important;
  color: var(--gz-ink) !important; margin-bottom: 20px !important;
}
body.woocommerce-checkout .woocommerce-additional-fields textarea{
  min-height: 90px; resize: vertical;
}
body.woocommerce-checkout .woocommerce-billing-fields h3{
  font-family: "Outfit", sans-serif !important; font-weight: 800 !important; font-size: 19px !important;
  color: var(--gz-ink) !important; margin-bottom: 20px !important;
}
body.woocommerce-checkout .woocommerce-form-login,
body.woocommerce-checkout .woocommerce-form-coupon{
  background: #fff !important;
  border: 1px solid var(--gz-line) !important;
  border-top: 2px solid var(--gz-blue-dark) !important;
  border-radius: 2px;
  padding: 20px;
}
body.woocommerce-checkout .woocommerce-form-coupon button,
body.woocommerce-checkout .woocommerce-form-login button{
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--gz-ink) !important; color: #fff !important; border: none !important; border-radius: 2px !important;
  font-family: "Outfit", sans-serif !important; font-weight: 700 !important; font-size: 13px !important;
  line-height: 1.2 !important; padding: 12px 20px !important; cursor: pointer;
}
body.woocommerce-checkout .woocommerce-form-coupon button:hover,
body.woocommerce-checkout .woocommerce-form-login button:hover{ background: var(--gz-blue) !important; color: var(--gz-ink) !important; }
body.woocommerce-cart .shipping-calculator-button,
body.woocommerce-checkout .shipping-calculator-button{
  color: var(--gz-blue-dark) !important;
}
/* Place Order / Proceed to Checkout — blue against the charcoal panels
   above them, the same accent-on-dark pairing used sitewide. */
body.woocommerce-cart a.checkout-button,
body.woocommerce-checkout #place_order{
  display: block !important;
  background: var(--gz-blue) !important;
  color: var(--gz-ink) !important;
  border-radius: 2px !important;
  font-weight: 700 !important;
  padding: 19px 28px !important;
  border: none !important;
  font-size: 15.5px !important;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  margin-top: 22px !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.woocommerce-cart a.checkout-button:hover,
body.woocommerce-checkout #place_order:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(21,146,184,.3);
}

/* Checkout form fields */
body.woocommerce-checkout .woocommerce-additional-fields h3{
  font-size: 16px !important;
  color: var(--gz-ink) !important;
}
body.woocommerce-checkout label{
  color: var(--gz-ink);
  font-size: 13px;
}
body.woocommerce-checkout input.input-text,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea{
  border: 1px solid var(--gz-line) !important;
  border-radius: 2px !important;
  padding: 11px 14px !important;
  background: #fff !important;
}
body.woocommerce-checkout input.input-text:focus,
body.woocommerce-checkout select:focus{
  border-color: var(--gz-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(21,146,184,.12) !important;
}
/* ===== My Account — the same torn-ledger panel language as Cart/Checkout/
 * Package pages (amber top-edge, soft lifted shadow, JetBrains Mono micro-
 * labels), not a generic "make it not ugly" pass of plain white boxes and
 * a stock blue button. Pure CSS against WooCommerce's own stable class
 * names — no template override, so the account/order/address logic
 * underneath is untouched. ===== */
body.woocommerce-account .woocommerce{ max-width: 1080px; margin: 0 auto; padding: 0 24px 60px; }
body.woocommerce-account .u-columns.woocommerce-Addresses{ max-width: 1080px; margin: 0 auto; }

/* Same white-card recipe as Quick Launch's .gz-ql-card — thin border,
   lifted shadow, 2px radius. No clip-path: the reference pages this is
   meant to match don't use it on their cards either. */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register,
body.woocommerce-account .woocommerce-ResetPassword,
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-account .woocommerce-Address{
  position: relative;
  background: #fff !important;
  border: 1px solid var(--gz-line) !important;
  border-radius: 2px;
  box-shadow: 0 10px 24px -16px rgba(20,24,27,.2);
  padding: 30px 28px;
  max-width: 460px;
  margin: 0 auto;
}
body.woocommerce-account .u-columns .u-column1.col-1 .woocommerce-form-login,
body.woocommerce-account .u-columns .u-column2.col-2 .woocommerce-form-register{
  margin: 0;
}
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-account .woocommerce-EditAccountForm{ max-width: 720px; }
body.woocommerce-account .u-columns.woocommerce-Addresses .woocommerce-Address{ max-width: none; margin: 0; }
body.woocommerce-account .woocommerce-form-login h2,
body.woocommerce-account .woocommerce-form-register h2,
body.woocommerce-account .woocommerce-ResetPassword h2,
body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3{
  font-family: "Outfit", sans-serif; font-weight: 800; font-size: 19px; color: var(--gz-ink);
  margin: 0 0 20px; text-wrap: balance;
}
body.woocommerce-account .woocommerce-Address-title{
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px;
}
body.woocommerce-account .woocommerce-Address-title h2{ margin: 0; }
body.woocommerce-account .woocommerce-Address-title a{
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gz-blue-dark); text-decoration: none;
}
body.woocommerce-account .woocommerce-Address-title a:hover{ text-decoration: underline; }
body.woocommerce-account .woocommerce-Address address{ font-style: normal; font-size: 13.5px; line-height: 1.7; color: var(--gz-muted); }

body.woocommerce-account .form-row label{
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gz-muted); margin-bottom: 6px; display: block;
}
body.woocommerce-account input.input-text,
body.woocommerce-account select{
  border: 1.5px solid var(--gz-line) !important;
  border-radius: 2px !important;
  padding: 11px 14px !important;
  font-family: inherit; font-size: 13.5px; background: #fff;
  transition: border-color .15s ease;
}
body.woocommerce-account input.input-text:focus,
body.woocommerce-account select:focus{ outline: none; border-color: var(--gz-blue) !important; }

body.woocommerce-account button.woocommerce-Button,
body.woocommerce-account input.woocommerce-Button,
body.woocommerce-account button.woocommerce-button,
body.woocommerce-account input.woocommerce-button,
body.woocommerce-account button.button,
body.woocommerce-account input.button{
  background: var(--gz-ink) !important;
  color: #fff !important;
  border-radius: 2px !important;
  font-weight: 700 !important;
  font-size: 13px;
  letter-spacing: .01em;
  padding: 12px 26px !important;
  border: none !important;
  cursor: pointer;
  transition: background .15s ease;
}
body.woocommerce-account button.woocommerce-Button:hover,
body.woocommerce-account input.woocommerce-Button:hover,
body.woocommerce-account button.button:hover,
body.woocommerce-account input.button:hover{
  background: var(--gz-blue) !important; color: var(--gz-ink) !important;
}

/* Dashboard nav — vertical tab list, same active-pill language as the
 * package-detail tabs elsewhere, not a plain bordered link list. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul{
  background: #fff !important; border: 1px solid var(--gz-line) !important;
  border-radius: 2px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li{ list-style: none; }
body.woocommerce-account .woocommerce-MyAccount-navigation li a{
  color: var(--gz-muted) !important; font-weight: 600; font-size: 13.5px;
  padding: 11px 14px !important; display: block; border-radius: 2px;
  transition: background .15s ease, color .15s ease;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  background: var(--gz-tint) !important; color: var(--gz-ink) !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background: var(--gz-blue) !important; color: var(--gz-ink) !important; font-weight: 700;
}

/* Orders ledger — same dark-header/zebra-row table language used for the
 * package comparison table elsewhere, not a bare default WC table. */
body.woocommerce-account table.woocommerce-orders-table,
body.woocommerce-account table.shop_table{
  width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff;
  border: 1px solid var(--gz-line);
}
body.woocommerce-account table.woocommerce-orders-table thead th,
body.woocommerce-account table.shop_table thead th{
  text-align: left; padding: 12px 14px; background: var(--gz-charcoal); color: #F2F0EA;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
body.woocommerce-account table.woocommerce-orders-table td,
body.woocommerce-account table.shop_table td{
  padding: 12px 14px; border-bottom: 1px solid var(--gz-line); color: var(--gz-muted);
}
body.woocommerce-account table.woocommerce-orders-table tbody tr:nth-child(even),
body.woocommerce-account table.shop_table tbody tr:nth-child(even){ background: var(--gz-tint); }
body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-status mark{
  background: none; color: var(--gz-blue-dark); font-weight: 700; text-transform: capitalize;
}
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info{
  border-top-color: var(--gz-blue) !important; background: var(--gz-tint) !important;
  color: var(--gz-ink) !important; border-radius: 2px;
}
body.woocommerce-account .woocommerce-message .button,
body.woocommerce-account .woocommerce-info .button{ float: none; margin-top: 10px; display: inline-block; }
@media (max-width: 780px){
  body.woocommerce-account .woocommerce-MyAccount-content{ padding: 24px 20px; }
}

/* ===== Header — full restyle: cart, nav, mobile drawer, sticky state ===== */
.site-header,
.site-header.is-sticky,
.site-header .site-main-header-wrap{
  background: var(--gz-charcoal) !important;
  border-bottom: 1px solid #23292C;
}
/* Kadence wraps the header in several nested "-inner" divs, some of which
 * carry their own opaque white background (e.g. .site-header-row-container-inner)
 * that visually covers the dark background above once scrolled/sticky.
 * Force every such wrapper transparent so only the outer dark background shows. */
.site-header [class*="-inner"],
.site-header [class*="inner-wrap"]{
  background: transparent !important;
}
.site-header.is-sticky{
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.site-header .site-title a,
.site-header .site-title,
.site-header a{
  color: #F2F0EA !important;
}
.site-header .main-nav-container ul li a,
.site-header .site-header-item a{
  color: var(--gz-mist) !important;
  font-size: 13.5px;
  letter-spacing: .01em;
}
.site-header .main-nav-container ul li a:hover,
.site-header .site-header-item a:hover{
  color: var(--gz-blue-light) !important;
}
/* The generic nav-hover rule above also matches the header CTA button (it's
 * an <a> inside .site-header-item too) — and since the button's own
 * background is that same blue, the hover text becomes invisible against
 * itself. Force the button's text to stay dark on hover, always. */
.site-header .header-button:hover,
.site-header a.button:hover,
.site-header .kadence-button:hover{
  color: var(--gz-void) !important;
  background: var(--gz-blue-light) !important;
  opacity: .92;
}
.site-header .kadence-svg-icon svg,
.site-header svg{
  fill: #F2F0EA !important;
  color: #F2F0EA !important;
}
.site-header .site-header-item.header-html-item a.gz-btn,
.site-header a.button,
.site-header .kadence-button{
  background: var(--gz-blue-light) !important;
  color: var(--gz-void) !important;
  border-radius: 2px !important;
  border: none !important;
}

/* Cart icon — bigger, clearly clickable, badge always visible */
.site-header .header-cart-wrap,
.site-header .kadence-header-cart,
.site-header .header-cart-inner-wrap,
.site-header .header-cart-button{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 6px !important;
  border-radius: 2px !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  flex: 0 0 auto !important;
  transition: background .15s ease;
}
.site-header .header-cart-button:hover{
  background: rgba(255,255,255,.06) !important;
}
.site-header .kadence-header-cart .kadence-svg-icon,
.site-header .kadence-header-cart svg{
  width: 26px !important;
  height: 26px !important;
  display: inline-block !important;
}
.site-header .site-header-main-section-right,
.site-header .site-header-item.site-header-focus-item{
  min-width: fit-content !important;
}
.site-header .cart-count,
.site-header .kadence-cart-menu-count{
  display: inline-flex !important;
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  background: var(--gz-blue-light) !important;
  color: var(--gz-void) !important;
  border-radius: 999px !important;
  min-width: 18px !important;
  height: 18px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Mobile drawer / popup menu — force dark brand theme, never Kadence's default white */
.popup-mobile-menu,
.mobile-menu-container,
.popup-mobile-menu .mobile-menu-container,
.mobile-menu-container .menu,
[class*="drawer-menu-container"]{
  background: var(--gz-charcoal) !important;
  color: #F2F0EA !important;
}
.popup-mobile-menu a,
.mobile-menu-container a,
.popup-mobile-menu .menu-close,
.mobile-menu-container .menu-close{
  color: #F2F0EA !important;
}
.popup-mobile-menu a:hover,
.mobile-menu-container a:hover{
  color: var(--gz-blue-light) !important;
}
.popup-mobile-menu,
.mobile-menu-container{
  border-left: 1px solid #2B3236 !important;
}
.popup-mobile-menu li,
.mobile-menu-container li{
  border-bottom: 1px solid #23292C !important;
}
.mobile-toggle-open-container svg,
.mobile-toggle-open svg{
  fill: #F2F0EA !important;
  color: #F2F0EA !important;
}

/* ===== Footer (Kadence structure, restyled) ===== */
/* Padding was previously gated behind a JS/WebGL-success class, so the
   footer's actual size visibly differed page to page depending on
   whether the 3D scene happened to boot — a real inconsistency, not
   just a missing bonus. Fixed size always, unconditionally; the 3D
   canvas + tagline are a pure enhancement layered inside this same
   space when available, never the thing the layout depends on. */
/* --gz-void now, matching the hero exactly -- "we are not using colors
   now, we are copying exact effect from hero everywhere." Was
   --gz-charcoal, a real (not imagined) mismatch against the hero. */
.site-footer{
  background: var(--gz-void) !important;
  color: var(--gz-mist) !important;
  /* Was 100px/70px, tuned back when the "You are still inside it."
     tagline needed top clearance -- that's gone now, and stacked on top
     of .gz-cta-stage's own bottom padding this read as one giant empty
     block. Trimmed to just real breathing room. */
  padding: 40px 0 56px;
}
.site-footer a{ color: var(--gz-mist) !important; }
.site-footer a:hover{ color: var(--gz-blue-light) !important; }
.site-footer .site-info,
.site-footer .footer-widget-area{
  color: var(--gz-mist) !important;
  font-size: 12.5px;
}
/* Kadence's footer builder puts copyright, Blog, the region-switch link,
   and the legal-links group as four flex children with nowrap -- fine
   on desktop where they all fit one row, but on mobile that same
   nowrap squeezes all four into an equal ~82px slot regardless of each
   one's actual text length, forcing "Viewing Global pricing, switch to
   India" to wrap across several lines inside a column barely wide
   enough for one word, reading as scattered/overlapping instead of a
   footer. Confirmed live via screenshot. Wrapping + centering below
   901px (this theme's own mobile breakpoint) lets each item take its
   natural width and flow onto its own line instead of fighting for a
   quarter-column each. */
@media (max-width: 900px){
  .site-footer .footer-widget-area.site-info{
    flex-wrap: wrap !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 10px; text-align: center;
  }
  .site-footer .footer-widget-area.site-info > *{ width: auto !important; }
  .gz-footer-legal-row{ justify-content: center !important; flex-wrap: wrap; gap: 6px 14px; }
}

/* ===== Hero ===== */
.gz-hero{
  background: radial-gradient(ellipse 120% 90% at 50% -10%, #1B3038 0%, var(--gz-ink) 55%);
  color: #F2F0EA;
  padding: 96px 24px 72px;
  text-align: center;
}
.gz-hero-inner{ max-width: 640px; margin: 0 auto; }

.gz-hero-home{ text-align: left; padding: 88px 24px; }
.gz-hero-split{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.gz-hero-home .gz-eyebrow{ margin-bottom: 22px; }
.gz-hero-home h1{ font-size: clamp(32px,4.2vw,46px); text-align:left; }
.gz-hero-home .gz-sub{ margin: 0 0 30px; text-align:left; max-width: 46ch; }
.gz-hero-home .gz-ctarow{ justify-content: flex-start; }
.gz-hero-visual{ width: 100%; }
.gz-hero-visual svg{ width: 100%; height: auto; filter: drop-shadow(0 20px 50px rgba(0,0,0,.35)); }

/* Hero-visual replacement — paper-cut stat tiles, not glassy SaaS mockups */
.gz-hv-stack{ width: 100%; max-width: 380px; margin: 0 auto; }
.gz-hv-kicker{
  font-family: "Outfit", sans-serif !important; font-size: 11px; font-weight: 600 !important; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gz-blue-light); text-align: center; margin-bottom: 20px;
}
.gz-hv-tiles{ display: flex; flex-direction: column; gap: 16px; }
.gz-hv-tile{
  position: relative; isolation: isolate;
  padding: 20px 24px; border-radius: 2px;
  transform: rotate(var(--r));
  display: flex; align-items: baseline; gap: 14px;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.45);
}
.gz-hv-tile::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: inherit; border-radius: inherit;
  clip-path: url(#gz-clip-lg);
}
.gz-hv-tile.dark{ background: var(--gz-charcoal); }
.gz-hv-tile.cream{ background: var(--gz-cream); }
.gz-hv-tile.accent{ background: var(--gz-blue); }
.gz-hv-tile .big{ font-family: "JetBrains Mono", monospace; font-size: 26px; font-weight: 700; flex: none; }
.gz-hv-tile .label{ font-size: 12.5px; font-weight: 600; opacity: .8; }
.gz-hv-tile.dark .big, .gz-hv-tile.dark .label{ color: #F2F0EA; }
.gz-hv-tile.cream .big, .gz-hv-tile.cream .label{ color: var(--gz-ink); }
.gz-hv-tile.accent .big, .gz-hv-tile.accent .label{ color: var(--gz-ink); }
@media (max-width: 900px){
  .gz-hero-split{ grid-template-columns: 1fr; }
  .gz-hero-home{ text-align:center; padding: 64px 20px 48px; }
  .gz-hero-home h1, .gz-hero-home .gz-sub{ text-align:center; margin-left:auto; margin-right:auto; }
  .gz-hero-home .gz-ctarow{ justify-content:center; }
  .gz-hero-home .gz-stats{ justify-content:center !important; }
  .gz-hero-visual{ order: -1; max-width: 380px; margin: 0 auto 12px; }
}
.gz-eyebrow{
  display:inline-block;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gz-blue-light);
  border: 1px solid #2C4750;
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 24px;
}
.gz-hero h1{
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 18px;
  text-wrap: balance;
  color: #F2F0EA !important;
}
.gz-hero h1 .accent{ color: var(--gz-blue-light) !important; }
.gz-hero p.gz-sub{
  color: var(--gz-mist) !important;
  font-size: 16px;
  max-width: 42ch;
  margin: 0 auto 32px;
}
.gz-hero p, .gz-hero span, .gz-hero div{ color: inherit; }
.gz-stats .num{ color: #F2F0EA !important; }
.gz-stats .label{ color: var(--gz-mist) !important; }
.gz-ctarow{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
/* Hand-cut edge on every button sitewide — was previously only on the two
 * literal hero buttons and the nav tiles, everywhere else rendered as a
 * flat rounded rectangle. The fill (or for ghost buttons, the border)
 * lives on ::before so the displacement filter can jag the shape without
 * ever touching the label text (::before is z-index:-1, label text sits
 * in normal flow above it — same isolation pattern used elsewhere). */
.gz-btn{
  position: relative;
  isolation: isolate;
  display:inline-block;
  background: var(--gz-blue-light);
  color: var(--gz-void);
  font-size: 14px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 2px;
  text-decoration: none;
}
.gz-btn::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: inherit; border-radius: inherit;
  clip-path: url(#gz-clip-btn);
}
.gz-btn.ghost{
  background: transparent;
  color: #F2F0EA;
}
.gz-btn.ghost::before{
  background: transparent;
  border: 1px solid #33393D;
}

/* ===== Multi-slide hero ===== */
.gz-hero-slider{ position: relative; padding: 0; overflow: hidden; min-height: 620px; }
.gz-hero-slide{
  position: absolute; inset: 0; display: flex; align-items: center;
  padding: 88px 24px 96px;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease, visibility 0s linear .7s;
  pointer-events: none;
}
.gz-hero-slide.is-active{
  position: relative; opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: auto;
}
.gz-hero-slide .gz-hero-split{ width: 100%; }
.gz-hero-slide.tint-a{ background: radial-gradient(ellipse 120% 90% at 20% -10%, #1B3038 0%, var(--gz-ink) 55%); }
.gz-hero-slide.tint-b{ background: radial-gradient(ellipse 120% 90% at 80% -10%, #22303a 0%, var(--gz-ink) 55%); }
.gz-hero-slide.tint-c{ background: radial-gradient(ellipse 120% 90% at 50% 110%, #1c2e34 0%, var(--gz-ink) 55%); }
.gz-hero-slide.tint-d{ background: radial-gradient(ellipse 120% 90% at 20% 110%, #21323a 0%, var(--gz-ink) 55%); }
.gz-hero-slide::before{
  content: ''; position: absolute; inset: 0; z-index: 0; opacity: .5;
  background: radial-gradient(circle at 30% 20%, rgba(79,195,232,.14), transparent 45%),
              radial-gradient(circle at 75% 75%, rgba(33,171,218,.12), transparent 50%);
  animation: gz-drift 14s ease-in-out infinite alternate;
}
.gz-hero-slide.is-active .gz-hero-split{ position: relative; z-index: 1; }
@keyframes gz-drift{ from{ transform: translate(0,0) scale(1); } to{ transform: translate(-3%, 2%) scale(1.06); } }

.gz-hero-nav{
  position: absolute; left: 0; right: 0; bottom: 20px; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.gz-hero-arrow{
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06); color: #F2F0EA; font-size: 15px; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.gz-hero-arrow:hover{ background: rgba(255,255,255,.14); }
.gz-hero-dots{ display: flex; gap: 8px; }
.gz-hero-dot{ width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,.25); cursor: pointer; transition: background .2s ease, width .2s ease; }
.gz-hero-dot.is-active{ background: var(--gz-blue-light); width: 22px; border-radius: 2px; }

@media (max-width: 900px){
  .gz-hero-slider{ min-height: 720px; }
  .gz-hero-slide{ padding: 56px 20px 96px; }
}
@media (prefers-reduced-motion: reduce){
  .gz-hero-slide::before{ animation: none; }
  .gz-hero-slide{ transition: opacity .3s ease; transform: none !important; }
}

/* ===== Horizontal-scroll case study strip ===== */
.gz-cs-scroller{ overflow: hidden; }
.gz-cs-track{
  display: flex; gap: 20px; overflow-x: auto; padding: 4px 4px 20px;
  scroll-snap-type: x proximity; cursor: grab; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.gz-cs-track.dragging{ cursor: grabbing; scroll-snap-type: none; }
.gz-cs-track .gz-cs-card{
  flex: 0 0 auto; width: 260px; scroll-snap-align: start; text-decoration: none;
  display: block; padding: 24px; border: 1px solid var(--gz-line); border-radius: 2px; background: #fff;
}
.gz-cs-track .gz-cs-card .tag{ font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--gz-blue-dark); font-weight: 700; margin-bottom: 10px; }
.gz-cs-track .gz-cs-card .num{ font-size: 26px; font-weight: 700; color: var(--gz-blue-dark); font-family: "JetBrains Mono", monospace; }
.gz-cs-track .gz-cs-card .desc{ font-size: 12.5px; color: var(--gz-muted); margin-top: 8px; line-height: 1.5; }

/* ===== Scroll-scrubbed motion ===== */
.gz-scrub{ transition: opacity .1s linear, transform .1s linear; }
@media (prefers-reduced-motion: reduce){
  .gz-scrub{ opacity: 1 !important; transform: none !important; }
}

/* ===== Portfolio: five distinct gallery treatments ===== */

/* 01 — Websites: masonry with one featured large tile.
 * Captions were hover-only (opacity:0 at rest) — on touch devices with no
 * hover state that's effectively no caption at all, and even on desktop
 * it read as tiles with nothing on them until you happened to point at
 * one. Always visible now, still with the gradient for legibility. Fewer
 * columns + bigger gap for more breathing room per tile. */
.gz-gallery-masonry{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; grid-auto-flow: dense;
}
.gz-gallery-masonry .gz-gallery-tile{
  position: relative; border: none; padding: 0; cursor: pointer; overflow: hidden;
  border-radius: 2px; aspect-ratio: 4/3; background: var(--gz-line);
}
.gz-gallery-masonry .gz-gallery-tile.feature{ grid-column: span 2; grid-row: span 2; aspect-ratio: 1/1; }
.gz-gallery-caption{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; font-size: 12px; font-weight: 600;
  text-align: left; opacity: 1;
}
@media (max-width: 720px){ .gz-gallery-masonry{ grid-template-columns: repeat(2, 1fr); gap: 14px; } .gz-gallery-masonry .gz-gallery-tile.feature{ grid-column: span 2; grid-row: span 1; aspect-ratio: 4/3; } }

/* 02 — Social Creative: tight uniform square grid (Instagram-style) — 5
 * columns and a real gap instead of 6 columns at 3px, which read as
 * cramped/tiny with barely any separation between tiles. */
.gz-gallery-square{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.gz-gallery-sq{ border: none; padding: 0; cursor: pointer; aspect-ratio: 1/1; overflow: hidden; border-radius: 2px; background: var(--gz-line); transition: transform .15s ease; }
.gz-gallery-sq:hover{ transform: scale(0.96); }
@media (max-width: 720px){ .gz-gallery-square{ grid-template-columns: repeat(3, 1fr); gap: 6px; } }

/* 03 — Video/Reels: horizontal 9:16 reel cards.
 * At 150px wide with a barely-legible 11px label, these previously read
 * as small unstyled boxes rather than an intentional "not filled yet"
 * placeholder — no dashed border, no explicit badge, easy to mistake for
 * broken UI. Widened, given a dashed border (the universal "placeholder"
 * signal) and an explicit COMING SOON badge instead of relying on tiny
 * body text alone to communicate that. */
.gz-reel-track{ padding-bottom: 8px; }
.gz-reel-card{
  flex: 0 0 auto; width: 200px; aspect-ratio: 9/16; border-radius: 2px;
  background: linear-gradient(160deg, #1B2124, #14181B); border: 1.5px dashed #3a444a;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--gz-blue-light); text-align: center;
}
.gz-reel-card .gz-coming-soon-badge{
  font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: var(--gz-ink); background: var(--gz-blue-light); padding: 4px 10px; border-radius: 999px;
}
.gz-reel-card span:not(.gz-coming-soon-badge){ font-size: 13px; font-weight: 600; line-height: 1.4; }

/* 04 — Branding & Logo: alternating editorial showcase rows.
 * .gz-showcase-label previously had no flex-grow, so on a short title it
 * just sat at its own text width, leaving the rest of the row an empty
 * horizontal gap next to every single row — the "large awkward dead
 * whitespace" bug. flex:1 + a border/background gives that space an
 * actual visual reason to exist instead of reading as leftover void. */
.gz-gallery-showcase{ display: flex; flex-direction: column; gap: 20px; }
.gz-showcase-row{
  display: flex; align-items: stretch; gap: 0; border: none; background: none; padding: 0; cursor: pointer; text-align: left; width: 100%;
}
.gz-showcase-row.reverse{ flex-direction: row-reverse; }
.gz-showcase-img{ flex: 0 0 44%; aspect-ratio: 4/3; border-radius: 12px 0 0 12px; overflow: hidden; background: var(--gz-line); }
.gz-showcase-row.reverse .gz-showcase-img{ border-radius: 0 12px 12px 0; }
.gz-showcase-label{
  flex: 1; display: flex; align-items: center; padding: 0 28px;
  font-size: 15px; font-weight: 700; color: var(--gz-ink);
  background: var(--gz-tint); border: 1px solid var(--gz-line); border-left: none;
  border-radius: 0 12px 12px 0;
}
.gz-showcase-row.reverse .gz-showcase-label{ border-left: 1px solid var(--gz-line); border-right: none; border-radius: 12px 0 0 12px; }
@media (max-width: 720px){
  .gz-showcase-row, .gz-showcase-row.reverse{ flex-direction: column; align-items: stretch; }
  .gz-showcase-img{ flex-basis: auto; border-radius: 12px 12px 0 0; }
  .gz-showcase-row.reverse .gz-showcase-img{ border-radius: 12px 12px 0 0; }
  .gz-showcase-label{ border-radius: 0 0 12px 12px; border: 1px solid var(--gz-line); border-top: none; padding: 16px 20px; }
  .gz-showcase-row.reverse .gz-showcase-label{ border-radius: 0 0 12px 12px; border: 1px solid var(--gz-line); border-top: none; }
}

/* 05 — Ad Campaigns: wide stacked banner cards — same dashed-border +
 * explicit badge placeholder treatment as the reel cards, for consistency. */
.gz-ad-stack{ display: flex; flex-direction: column; gap: 12px; }
.gz-ad-banner{
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; border-radius: 2px;
  background: var(--gz-charcoal); border: 1.5px dashed #3a444a; color: var(--gz-blue-light); font-size: 14px; font-weight: 600;
}
.gz-ad-banner .gz-ad-banner-left{ display: flex; align-items: center; gap: 16px; }
.gz-ad-banner .gz-coming-soon-badge{
  font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: var(--gz-ink); background: var(--gz-blue-light); padding: 4px 10px; border-radius: 999px; flex: none;
}

.gz-gallery-empty{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--gz-muted); font-size: 11px; background: var(--gz-line); }

/* ===== Stats ===== */
.gz-stats{
  display:flex;
  gap:64px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid #23292C;
}
.gz-stats .stat{ text-align:center; }
.gz-stats .num{
  display:block;
  font-size: 30px;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  color: #F2F0EA;
  margin-bottom: 4px;
}
.gz-stats .label{
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--gz-mist);
}

/* ===== Section scaffolding ===== */
.gz-section{ padding: 64px 24px; }
.gz-section.light{ background: var(--gz-cream); color: var(--gz-ink); }
.gz-section-inner{ max-width: 1080px; margin: 0 auto; }
.gz-section-title{ text-align:center; margin-bottom: 40px; }
.gz-section-title .k{
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gz-blue-dark);
}
.gz-section-title h2{
  font-size: 26px;
  font-weight: 600;
  margin: 8px 0 0;
  letter-spacing: -.005em;
}

/* ===== Portfolio slider (category verticals) ===== */
.gz-slider-track{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 4px 16px;
  scroll-snap-type: x proximity;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.gz-slider-track.dragging{ cursor: grabbing; scroll-snap-type: none; }
.gz-slider-track::-webkit-scrollbar{ height: 6px; }
.gz-slider-track::-webkit-scrollbar-thumb{ background: var(--gz-line); border-radius: 999px; }
.gz-slider-card{
  flex: 0 0 auto;
  width: 220px;
  height: 220px;
  position: relative;
  border: 1px solid var(--gz-line);
  border-radius: 2px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  scroll-snap-align: start;
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gz-slider-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(20,24,27,.14);
}
.gz-slider-card-title{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(12,17,19,.88), transparent);
  color: #F2F0EA;
  font-size: 12px;
  padding: 24px 12px 10px;
  text-align: left;
  pointer-events: none;
}
@media (max-width: 640px){
  .gz-slider-card{ width: 168px; height: 168px; }
}

/* ===== Pricing preview ===== */
.gz-pricing-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 20px;
  max-width: 780px;
  margin: 0 auto;
}
.gz-pricing-grid.cols-4{
  grid-template-columns: repeat(4, 1fr);
  max-width: 960px;
}
@media (max-width: 900px){
  .gz-pricing-grid.cols-4{ grid-template-columns: repeat(2, 1fr); }
}
.gz-pcard{
  background:#fff;
  border:1px solid var(--gz-line);
  border-radius: 2px;
  padding: 26px 22px;
  text-align:center;
  box-shadow: 0 1px 3px rgba(20,24,27,.04);
}
.gz-pcard.hi{
  border-color: var(--gz-blue);
  box-shadow: 0 8px 24px rgba(21,146,184,.14);
  transform: translateY(-4px);
}
.gz-pcard .t{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#5C5648; font-family:ui-monospace,monospace; }
.gz-pcard .p{ font-size:26px; font-weight:600; margin:10px 0 2px; font-family:ui-monospace,monospace; letter-spacing:-.01em; }
.gz-pcard .p span{ font-size:12px; font-weight:400; color:#8A8478; }
.gz-pcard .btn{
  display:inline-block; margin-top:16px; font-size:12px; font-weight:600;
  padding:9px 20px; border-radius: 2px; background:#F2EEE3; color: var(--gz-ink); text-decoration:none;
}
.gz-pcard.hi .btn{ background: var(--gz-blue); color:#fff; }

/* ===== Case studies strip ===== */
.gz-cs-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 16px;
}
.gz-cs-card{
  background: #fff; border:1px solid var(--gz-line); border-radius: 2px; padding: 22px;
  box-shadow: 0 1px 3px rgba(20,24,27,.07), 0 1px 0 var(--gz-line);
}
.gz-cs-card .num{ font-size:24px; font-weight:600; color:var(--gz-blue-dark); font-family:ui-monospace,monospace; }
.gz-cs-card .desc{ font-size:12.5px; color:var(--gz-muted); margin-top:6px; }

/* ===== Trusted by ===== */
.gz-logos{
  display:flex; justify-content:center; align-items:center; gap: 40px; flex-wrap:wrap;
  margin-top: 12px;
}
.gz-logos img{ max-height: 32px; width:auto; filter: grayscale(1); opacity:.7; }

/* ===== Services grid ===== */
.gz-services-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;
}
.gz-svc-card{
  background:#fff; border:1px solid var(--gz-line); border-radius: 2px; padding:24px;
  box-shadow: 0 1px 3px rgba(20,24,27,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gz-svc-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(20,24,27,.08);
  border-color: var(--gz-blue);
}
.gz-svc-card h3{ font-size:16px; margin:0 0 8px; }
.gz-svc-card p{ font-size:13.5px; color:var(--gz-muted); margin:0; }

/* ===== Interaction polish ===== */
.gz-btn{ transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
/* Kadence's global button:hover{color;background} (see the body a:hover
   fix near the top of this file for the link version of the same bug)
   also fires on every <button class="gz-btn">, not just <a class="gz-btn">
   — restate this component's own color/background on hover so a plain
   <button> version doesn't flash to Kadence's unrelated navy blue. */
.gz-btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(63,196,232,.28); opacity:.95; background: var(--gz-blue-light); color: var(--gz-void); }
.gz-btn.ghost:hover{ box-shadow:none; border-color:#4A5257; background:rgba(255,255,255,.04); }

.gz-pcard{ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.gz-pcard:hover{ transform: translateY(-4px); box-shadow: 0 12px 28px rgba(20,24,27,.10); border-color: var(--gz-blue); }
.gz-pcard.hi:hover{ transform: translateY(-8px); }
.gz-pcard .btn{ transition: background .15s ease, transform .15s ease; }
.gz-pcard .btn:hover{ transform: translateY(-1px); }

.gz-cs-card{ transition: box-shadow .18s ease, border-color .18s ease; }
.gz-cs-card:hover{ box-shadow: 0 8px 20px rgba(20,24,27,.06); border-color: var(--gz-blue); }

/* ===== Section rhythm ===== */
.gz-section-title h2{ text-wrap: balance; }
.gz-hero h1{ text-wrap: balance; }

/* ===== Responsive tuning ===== */
@media (max-width: 640px){
  .gz-hero{ padding: 64px 20px 48px; }
  .gz-stats{ gap: 32px; }
  .gz-section{ padding: 48px 20px; }
  .gz-ctarow{ flex-direction: column; align-items: stretch; }
  .gz-ctarow .gz-btn{ text-align: center; }
  .gz-services-grid{ grid-template-columns: 1fr; }
  .gz-pricing-grid{ grid-template-columns: 1fr; }
  .gz-logos{ gap: 22px; }
}

/* ===== Focus states for accessibility ===== */
a:focus-visible, .gz-btn:focus-visible, .gz-pcard .btn:focus-visible{
  outline: 2px solid var(--gz-blue-light);
  outline-offset: 2px;
}

/* ===== Header polish ===== */
/* Merged with the paper-cut entrance transition above — a second
 * .site-header{transition:...} rule here would silently replace it
 * (transition is a shorthand, doesn't merge across rules; this rule loads
 * later in the file and would otherwise win). */
.site-header{ transition: background .2s ease, opacity .5s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), filter .7s cubic-bezier(.16,1,.3,1); }
.site-header .site-title{ font-weight: 600; letter-spacing: -.01em; }

/* ===================================================================
 * PACKAGE DETAIL PAGE — new component (template-package-detail.php).
 * Own composition, not the hero prototype reused: readable content-heavy
 * panels (intro, one per tier, comparison table) rather than a moody
 * dark stage, since this page's job is dense real information, not a
 * hero moment. Reuses .gz-assemble-scope's shared panel mechanic.
 * =================================================================== */
.gz-pkg-stage{ background: var(--gz-charcoal); padding: 72px 24px; }
.gz-pkg-tier-stage{ padding: 56px 24px; }
.gz-pkg-tier-stage.foundation-stage{ background: var(--gz-cream); }
.gz-pkg-tier-stage.momentum-stage{ background: #103440; }
.gz-pkg-tier-stage.command-stage{ background: var(--gz-charcoal); }
.gz-pkg-compare-stage{ background: #fff; padding: 64px 24px; }
/* Widened from 880px to match the sitewide standard content width
   (.gz-section-inner/.gz-cart-total-inner both use 1080px) — this was
   narrower than every other card/functional-content page on the site
   for no reason tied to readability (it wraps a product/package card,
   not a paragraph of prose), and on a 1920px screen left 500px+ of dead
   space on each side. */
.gz-pkg-inner{ max-width: 1080px; margin: 0 auto; }

.gz-pkg-intro{ padding: 40px 44px; color: #F2F0EA; }
.gz-pkg-kicker{ font-family: "Outfit", sans-serif !important; font-weight: 600 !important; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gz-blue-light); }
.gz-pkg-intro h1{ font-size: clamp(28px,4vw,42px); margin: 10px 0 16px; color: #F2F0EA !important; }
.gz-pkg-lede{ font-size: 16px; line-height: 1.6; color: var(--gz-mist); max-width: 60ch; margin: 0 0 22px; }
.gz-pkg-notes{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #2B3236; padding-top: 18px; }
.gz-pkg-notes li{ font-size: 13px; color: var(--gz-mist); line-height: 1.6; padding-left: 18px; position: relative; }
.gz-pkg-notes li::before{ content: '\2022'; position: absolute; left: 0; color: var(--gz-blue-light); }

.gz-pkg-tier{ padding: 40px 44px; }
.gz-pkg-tier-head{ margin-bottom: 28px; }
.gz-pkg-tier-badge{ display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: rgba(33,171,218,.15); color: var(--gz-blue-dark); margin-bottom: 10px; }
.gz-pkg-tier-price{ font-family: "JetBrains Mono", monospace; font-size: 30px; font-weight: 700; margin-top: 6px; }
.gz-pkg-tier-price span{ font-size: 14px; font-weight: 500; opacity: .85; }

.gz-pkg-categories{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 24px; margin-bottom: 8px; }
.gz-pkg-cat h3{ font-size: 13px; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid currentColor; opacity: .9; }
.gz-pkg-cat ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gz-pkg-cat li{ font-size: 13px; line-height: 1.55; padding-left: 16px; position: relative; opacity: .92; }
.gz-pkg-cat li::before{ content: '–'; position: absolute; left: 0; opacity: .6; }

.gz-pkg-tier-stage.foundation-stage .gz-pkg-tier, .gz-pkg-tier-stage.foundation-stage h2, .gz-pkg-tier-stage.foundation-stage .gz-pkg-tier-price{ color: var(--gz-ink); }
.gz-pkg-tier-stage.momentum-stage .gz-pkg-tier{ background: var(--gz-blue) !important; color: var(--gz-void); }
.gz-pkg-tier-stage.momentum-stage h2, .gz-pkg-tier-stage.momentum-stage .gz-pkg-tier-price{ color: var(--gz-void); }
.gz-pkg-tier-stage.momentum-stage .gz-pkg-tier-badge{ background: rgba(12,17,19,.15); color: var(--gz-void); }
.gz-pkg-tier-stage.command-stage .gz-pkg-tier-badge{ background: rgba(255,255,255,.14); color: #F2F0EA; }
.gz-pkg-tier-stage.momentum-stage .gz-pkg-cat li::before{ opacity: .5; }
.gz-pkg-tier-stage.command-stage .gz-pkg-tier, .gz-pkg-tier-stage.command-stage h2, .gz-pkg-tier-stage.command-stage .gz-pkg-tier-price{ color: #F2F0EA; }
.gz-pkg-tier-stage.command-stage .gz-pkg-cat h3{ color: #F2F0EA; }

.gz-pkg-callout{ margin-top: 24px; padding: 20px 22px; border-radius: 2px; background: rgba(0,0,0,.06); }
.gz-pkg-tier-stage.momentum-stage .gz-pkg-callout, .gz-pkg-tier-stage.command-stage .gz-pkg-callout{ background: rgba(255,255,255,.18); }
.gz-pkg-callout strong{ display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.gz-pkg-callout p{ font-size: 13.5px; line-height: 1.6; margin: 0; opacity: .9; }

.gz-pkg-compare{ padding: 36px 40px; }
.gz-pkg-compare-table{ width: 100%; border-collapse: collapse; font-size: 12.5px; }
.gz-pkg-compare-table th{ text-align: left; padding: 12px 14px; background: var(--gz-charcoal); color: #F2F0EA; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.gz-pkg-compare-table th:not(:first-child), .gz-pkg-compare-table td:not(:first-child){ text-align: center; }
.gz-pkg-compare-table td{ padding: 11px 14px; border-bottom: 1px solid var(--gz-line); color: var(--gz-muted); }
.gz-pkg-compare-table td.rowlabel{ font-weight: 700; color: var(--gz-ink); text-align: left; }
.gz-pkg-compare-table tr:nth-child(even){ background: var(--gz-tint); }

@media (max-width: 700px){
  .gz-pkg-categories{ grid-template-columns: 1fr; }
  .gz-pkg-intro, .gz-pkg-tier, .gz-pkg-compare{ padding: 28px 22px; }
}

/* ===================================================================
 * PRODUCT PAGE — new woocommerce/content-single-product.php override,
 * own panel composition (not the hero prototype reused). Reuses
 * WooCommerce's own template functions inside the new panel wrappers.
 * =================================================================== */
.gz-product-hero-stage{ background: var(--gz-cream); padding: 64px 24px; }
.gz-product-hero-row{ display: block; }

/* Summary panel was the exact same cream as the stage it sits on — no
 * visual separation at all, reading as flat/bland. White card with a
 * real border/shadow and a brand accent stripe gives it actual depth,
 * plus brand typography on price (was still WooCommerce's default,
 * unbranded styling) matching the mono-price treatment used everywhere
 * else on the site (tier ladders, package pricing). */
/* Same white-card recipe as Quick Launch's .gz-ql-card (thin border,
   lifted shadow), no scroll-reveal — this is the price + Buy button,
   nothing on it should ever depend on scroll-position math resolving
   before it's fully visible (reproduced live elsewhere: unresolved
   reveal state renders as filter:blur(6px) + reduced opacity). */
.gz-product-summary-panel{
  background: #fff;
  border: 1px solid var(--gz-line);
  box-shadow: 0 10px 24px -16px rgba(20,24,27,.25);
  position: relative;
}
.gz-product-summary-panel::after{
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--gz-blue); border-radius: 2px 2px 0 0; z-index: 2;
}
.gz-product-summary-panel{ padding: 44px 46px; }
.gz-product-summary-panel .product_title{ font-size: 28px !important; line-height: 1.2; margin-bottom: 16px !important; }
/* Price gets the same blue-spotlight badge treatment as the cart/
   checkout totals now use — was plain large text sharing the panel's own
   white background; now it's its own distinct block, the same "this
   number is the point" language used everywhere else in the purchase
   flow now. */
/* No rotation — a rotated transform on bold monospace digits forces the
   browser to anti-alias the letterforms at an angle, which reads as
   blurry/doubled text (reproduced live). Fine on a whole card/box; not
   fine on the actual price figure itself. */
/* Selector prefixed with body.single-product so this reliably beats the
   older, more-specific "body.single-product p.price" rule above (same
   !important tier, higher specificity wins) — that rule was clobbering
   this badge's white text back to --gz-blue-dark on the dark charcoal
   fill, unreadable enough to look like blurry/ghosted text (reproduced
   live on Quick Launch product pages).
   Scoped to p.price specifically, NOT the generic .price class — WC's
   own main price is a <p class="price">, but .gz-tier-ladder-step (the
   small "Where This Tier Sits" Foundation/Momentum/Command comparison
   row, also rendered inside .gz-product-summary-panel via the same
   woocommerce_after_add_to_cart_form hook) has its own unrelated
   <span class="price">, colored text with no box by design (see
   .gz-tier-ladder-step .price). The earlier generic ".price" version of
   this selector matched that span too, turning three small comparison
   prices into the same heavy black box meant only for the one featured
   price — reproduced live, real regression, not intended anywhere. */
/* Simplified per direct feedback — the solid black box was repeatedly
   flagged as not matching the sitewide theme (every other price on the
   site, including the tier-ladder comparison row two inches below this
   one, is plain bold colored text, no fill/box/shadow). Kept large and
   bold so it's still clearly the featured number on the page — just
   without the box. */
body.single-product .gz-product-summary-panel p.price{
  font-family: "JetBrains Mono", monospace !important; font-size: 34px !important; font-weight: 800 !important;
  color: var(--gz-blue-dark) !important; display: block; margin: 10px 0 22px; line-height: 1.1;
}
body.single-product .gz-product-summary-panel p.price span.woocommerce-Price-amount{
  font-family: "JetBrains Mono", monospace !important; font-size: 34px !important; font-weight: 800 !important;
  color: var(--gz-blue-dark) !important;
}
.gz-product-summary-panel .woocommerce-product-details__short-description{
  font-size: 14.5px; line-height: 1.65; color: var(--gz-muted); margin-bottom: 24px;
}
.gz-product-summary-panel .woocommerce-product-details__short-description ul{ padding-left: 20px; }
.gz-product-summary-panel .woocommerce-product-details__short-description li{ margin-bottom: 6px; }
.gz-product-summary-panel form.cart{ margin-top: 8px; }
.gz-product-summary-panel .quantity input{
  border: 1.5px solid var(--gz-line); border-radius: 2px; padding: 12px 10px; font-family: "JetBrains Mono", monospace;
  width: 64px; text-align: center;
}

.gz-product-tabs-stage{ background: #fff; padding: 56px 24px; }
.gz-product-tabs-panel{
  background: #fdfbf6; border: 1px solid var(--gz-line); box-shadow: 0 10px 24px -16px rgba(20,24,27,.15);
  padding: 36px 40px;
}
.gz-product-tabs-panel .wc-tabs{ display: flex; gap: 4px; border-bottom: 2px solid var(--gz-line); margin-bottom: 24px; padding: 0; list-style: none; }
.gz-product-tabs-panel .wc-tabs li{ margin: 0; }
.gz-product-tabs-panel .wc-tabs li a{
  display: inline-block; padding: 10px 20px; font-family: "Outfit", sans-serif; font-weight: 700; font-size: 13.5px;
  color: var(--gz-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.gz-product-tabs-panel .wc-tabs li.active a{ color: var(--gz-blue-dark); border-bottom-color: var(--gz-blue); }
.gz-product-tabs-panel .woocommerce-Tabs-panel a{ color: var(--gz-blue-dark); font-weight: 600; }
@media (max-width: 820px){
  .gz-product-summary-panel, .gz-product-tabs-panel{ padding: 24px 22px; }
}

/* ===================================================================
 * NEW NAV — persistent minimal bar + paper-cut panel slide-out drawer
 * (batch: region-nav-productfix, item 2). Replaces Kadence's default
 * header wherever body carries .gz-nav-active. The bar itself is
 * deliberately NOT part of the panel-assembly motion system — it's
 * persistent chrome, always visible, simple. The drawer contents use the
 * same .gz-assemble-scope/.panel mechanic as the rest of the site.
 * =================================================================== */
.gz-nav-active #masthead{ display: none !important; }
/* Kadence's own native mobile drawer nav (#mobile-drawer) renders as a
 * sibling AFTER </header>, not inside #masthead — hiding #masthead alone
 * never touches it. Left in the DOM it's a fully redundant duplicate nav
 * system (own toggle, own cart badge, own close button) that can bleed
 * stray fragments of itself into view; disabled outright wherever the new
 * nav is active instead of trying to selectively neutralize pieces of it. */
.gz-nav-active #mobile-drawer,
.gz-nav-active .mobile-toggle-open-container{ display: none !important; }
.gz-nav-active #wrapper.site{
  padding-top: 68px; /* the persistent bar is position:fixed, out of flow — without this, content sits underneath it */
  transition: transform .6s cubic-bezier(0.16,1,0.3,1);
  transform: translateX(0);
}
.gz-nav-active.gz-nav-open #wrapper.site{
  transform: translateX(-320px);
}
@media (max-width: 480px){
  .gz-nav-active.gz-nav-open #wrapper.site{ transform: translateX(-88vw); }
}

.gz-nav-bar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; padding: 0 24px;
  background: var(--gz-cream);
  border-bottom: 1px solid var(--gz-line);
  transition: transform .6s cubic-bezier(0.16,1,0.3,1);
}
.gz-nav-active.gz-nav-open .gz-nav-bar{ transform: translateX(-320px); }
@media (max-width: 480px){
  .gz-nav-active.gz-nav-open .gz-nav-bar{ transform: translateX(-88vw); }
}
.gz-nav-logo{ display: flex; align-items: center; height: 100%; }
.gz-nav-logo-img{ max-height: 30px; width: auto; display: block; }
.gz-nav-logo-text{ font-family: "Outfit", sans-serif; font-weight: 800; color: var(--gz-ink); font-size: 18px; }
.gz-nav-actions{ display: flex; align-items: center; gap: 8px; }
.gz-nav-action:hover{ color: var(--gz-ink); background: transparent; }
.gz-nav-action{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: var(--gz-ink);
  background: transparent; border: none; cursor: pointer;
  text-decoration: none;
}
.gz-nav-wa{ color: #25D366; }
.gz-nav-cart-count{
  position: absolute; top: 2px; right: 2px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--gz-blue); color: var(--gz-ink);
  font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
/* ===== GZ-CART-DROP — hover preview from the nav cart icon, so you can
 * see what's in there without a full page load to /cart/. ===== */
.gz-nav-cart-wrap{ position: relative; }
.gz-cart-drop{
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 200;
  width: 300px; background: #fff; border: 1px solid var(--gz-line);
  box-shadow: 0 20px 44px -20px rgba(20,24,27,.35); padding: 16px;
}
.gz-cart-drop-empty{ font-size: 13px; color: var(--gz-muted); text-align: center; margin: 8px 0; }
.gz-cart-drop-items{ display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow-y: auto; }
.gz-cart-drop-item{ display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding-bottom: 10px; border-bottom: 1px dashed var(--gz-line); }
.gz-cart-drop-item:last-child{ border-bottom: none; padding-bottom: 0; }
.gz-cart-drop-name{ color: var(--gz-ink); font-weight: 600; }
.gz-cart-drop-price{ font-family: "JetBrains Mono", monospace; color: var(--gz-blue-dark); font-weight: 700; white-space: nowrap; flex: none; }
.gz-cart-drop-total{
  display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--gz-line); font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 14px; color: var(--gz-ink);
}
.gz-cart-drop-actions{ display: flex; gap: 8px; margin-top: 14px; }
.gz-cart-drop-view, .gz-cart-drop-checkout{
  flex: 1; text-align: center; padding: 9px 8px; font-size: 12px; font-weight: 700; text-decoration: none; border-radius: 2px;
}
.gz-cart-drop-view{ border: 1px solid var(--gz-line); color: var(--gz-ink); }
.gz-cart-drop-view:hover{ border-color: var(--gz-ink); }
.gz-cart-drop-checkout{ background: var(--gz-blue); color: var(--gz-ink); }
.gz-cart-drop-checkout:hover{ background: var(--gz-blue-dark); color: #fff; }
@media (max-width: 640px){ .gz-cart-drop{ display: none; } }

.gz-nav-toggle-bars{ display: flex; flex-direction: column; gap: 5px; width: 20px; }
.gz-nav-toggle-bars span{ display: block; height: 2px; width: 100%; background: currentColor; transition: transform .3s ease, opacity .3s ease; }
.gz-nav-open .gz-nav-toggle-bars span:first-child{ transform: translateY(3.5px) rotate(45deg); }
.gz-nav-open .gz-nav-toggle-bars span:last-child{ transform: translateY(-3.5px) rotate(-45deg); }

.gz-nav-scrim{
  position: fixed; inset: 0; z-index: 490;
  background: transparent;
}
.gz-nav-open .gz-nav-scrim{ display: block; }

/* The drawer's own container no longer slides itself in — it used to
 * (translateX 100%→0 over .6s) at the same time as the individual link
 * panels animated, and the two competing transforms masked each other,
 * reading as "just fade/appear, no real motion". The content-shift above
 * already reveals this space physically; the drawer container just needs
 * to be present (near-instant opacity swap) so the panel-level paper-cut
 * assembly — not a second container-level slide — is the motion that's
 * actually visible, matching how every other section on the site works
 * (static section, only child panels animate). */
.gz-nav-drawer{
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 510;
  width: 320px; max-width: 88vw;
  background: var(--gz-cream);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  display: flex; flex-direction: column;
  overflow-y: auto;
  box-shadow: -20px 0 44px -20px rgba(20,24,27,.4);
}
.gz-nav-open .gz-nav-drawer{ opacity: 1; pointer-events: auto; }
.gz-nav-drawer-head{
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; padding: 0 20px; flex-shrink: 0;
  border-bottom: 1px solid var(--gz-line);
}
.gz-nav-drawer-label{
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gz-amber-deep);
}
.gz-nav-close{
  width: 36px; height: 36px; border: none; background: transparent; color: var(--gz-ink);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.gz-nav-close:hover{ background: transparent; color: var(--gz-ink); }
.gz-nav-drawer-links{ display: flex; flex-direction: column; padding: 8px 16px 24px; gap: 10px; }
/* Same hand-cut pill treatment as the desktop nav tiles (clip-path on a
   ::before layer) — the drawer links were flat rectangles with no edge
   treatment at all, reading as a generic list rather than part of the
   site's paper-cut system. Each tile sits as its own lighter panel on
   the charcoal drawer, not a flush list item. */
.gz-nav-drawer-link{
  position: relative; isolation: isolate;
  display: flex; align-items: baseline; gap: 12px;
  padding: 16px 18px; text-decoration: none;
  --slide-from: 80px;
}
.gz-nav-drawer-link::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  clip-path: url(#gz-clip-btn);
}
/* Cream drawer ground now (was flat charcoal, which flattened every tone
   into near-identical pale-text-on-dark and made the whole menu read as
   "just a black list"). Real tone-banded cards instead: dark tiles are
   genuinely dark, cream tiles are genuinely paper-white, same contrast
   language as the tile system everywhere else on the site. */
.gz-nav-drawer-link.dark{ color: #F2F0EA; }
.gz-nav-drawer-link.dark::before{ background: var(--gz-charcoal); }
.gz-nav-drawer-link.cream{ color: var(--gz-ink); }
.gz-nav-drawer-link.cream::before{ background: #fff; border: 1px solid var(--gz-line); box-shadow: 0 6px 16px -12px rgba(20,24,27,.3); }
.gz-nav-drawer-link:hover::before{ filter: brightness(1.08); }
.gz-nav-drawer-link.accent{ color: var(--gz-ink); }
.gz-nav-drawer-link.accent::before{ background: var(--gz-blue); border: 1px solid var(--gz-blue-dark); }
.gz-nav-drawer-link.accent .gz-nav-drawer-link-num{ opacity: .85; }
.gz-nav-drawer-link-num{
  font-family: "JetBrains Mono", monospace; font-size: 12px; opacity: .75;
}
.gz-nav-drawer-link-label{
  font-family: "Outfit", sans-serif; font-weight: 700; font-size: 18px;
}

@media (max-width: 700px){
  .gz-nav-active.gz-nav-open #wrapper.site,
  .gz-nav-active.gz-nav-open .gz-nav-bar{ transform: translateX(-88vw); }
}

/* Mobile logo: icon-only white mark, not the full wordmark — desktop
 * default below shows the wordmark; this overrides it under 901px. */
.gz-nav-logo-icon{ display: none; max-height: 30px; width: auto; }
@media (max-width: 900px){
  .gz-nav-logo-full{ display: none; }
  .gz-nav-logo-icon{ display: block; }
}

/* ===================================================================
 * DESKTOP HEADER TILES (batch: nav-tiles-in-header). Not a plain text
 * link menu — small paper-cut panel tiles sitting in the header bar,
 * same rough-edge/tone system as every panel on the site, just compact
 * and permanently visible (no lock/unlock entrance state — this is
 * persistent chrome, not a scroll-triggered composition, matching the
 * header's own "not part of the assembly motion system" rule). Mobile
 * keeps the existing toggle-driven drawer entirely untouched below
 * 901px.
 * =================================================================== */
.gz-nav-menu{ display: none; }
@media (min-width: 901px){
  .gz-nav-toggle{ display: none; }
  .gz-nav-bar{ justify-content: flex-start; gap: 24px; height: auto; min-height: 68px; padding: 10px 24px; }
  .gz-nav-menu{
    display: flex; align-items: center; gap: 10px; flex: 1; flex-wrap: wrap;
    margin-left: 32px; /* was rendering flush against the logo with zero breathing room */
  }
  /* Hand-cut pill nav items — the nav bar is cream now (was solid
     charcoal), so the old dark/cream/accent tile-tone system doesn't
     work here at all (a "cream" tile would be invisible on a cream bar,
     same blend bug as everywhere else). One consistent pill style
     instead, with a blue-tinted "active" state for the current page. */
  .gz-nav-menu-tile{
    position: relative;
    isolation: isolate;
    display: inline-flex; align-items: center;
    font-family: "Outfit", sans-serif; font-weight: 700; font-size: 12.5px;
    text-decoration: none; white-space: nowrap;
    padding: 9px 16px; border-radius: 2px;
    color: var(--gz-ink);
    transition: transform .15s ease, color .15s ease;
  }
  .gz-nav-menu-tile::before{
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--gz-tint); border: 1px solid rgba(20,24,27,.14);
    border-radius: inherit;
    clip-path: url(#gz-clip-btn);
  }
  .gz-nav-menu-tile:hover{ transform: translateY(-2px); color: var(--gz-blue-dark); }
  .gz-nav-menu-tile:hover::before{ border-color: var(--gz-blue); }
  .gz-nav-menu-tile.accent{ color: var(--gz-blue-dark); }
  .gz-nav-menu-tile.accent::before{ background: rgba(33,171,218,.14); border-color: var(--gz-blue); }
  .gz-nav-actions{ margin-left: auto; }
}

/* ===================================================================
 * BLOG — new home.php posts-index template, replacing Kadence's default
 * archive (generic clipart-stock thumbnails, zero brand treatment).
 * =================================================================== */
/* Flex + center, not grid auto-fill — same fix as .gz-pkgd-record-cats:
   post count grows over time and won't always divide evenly into full
   rows, so a plain auto-fill grid will eventually strand a lone last
   card on the left edge with dead space beside it. Not visibly broken
   today (exactly 3 posts = one full row right now), but guaranteed to
   break the moment a 4th, 7th, etc. post is published. */
.gz-blog-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.gz-blog-card{ flex: 0 1 340px;
  display: flex; flex-direction: column; text-decoration: none; color: var(--gz-ink);
  background: #fff; border: 1px solid var(--gz-line); border-radius: 2px; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.gz-blog-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(20,24,27,.22); }
.gz-blog-card-media{ aspect-ratio: 1200/630; overflow: hidden; background: var(--gz-charcoal); }
.gz-blog-card-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.gz-blog-card-body{ padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.gz-blog-card-eyebrow{ font-family: "Outfit", sans-serif !important; font-weight: 600 !important; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gz-muted); }
.gz-blog-card-body h3{ font-size: 17px; margin: 0; line-height: 1.35; }
.gz-blog-card-body p{ font-size: 13.5px; color: var(--gz-muted); margin: 0; line-height: 1.55; }
.gz-blog-card-arrow{ font-size: 12.5px; font-weight: 700; color: var(--gz-blue-dark); margin-top: 4px; }
.gz-blog-card:hover .gz-blog-card-arrow{ text-decoration: underline; }
.pagination, nav.pagination{ display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.pagination .page-numbers{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 2px;
  border: 1px solid var(--gz-line); color: var(--gz-ink); text-decoration: none; font-size: 13px;
}
.pagination .page-numbers.current{ background: var(--gz-charcoal); color: #fff; border-color: var(--gz-ink); }

/* ===================================================================
 * STANDALONE SERVICE SINGLE — genuine rebuild (batch:
 * stop-filter-only-rebuild-templates). Reuses .gz-pkg-inner/kicker/lede
 * from the package-detail system for visual consistency, but the tier
 * ladder is its own new composition: three tier panels side by side in
 * one stage (not a stacked full-width section per tier like the 5-
 * category packages need — a single service's tier content is much
 * shorter, so three-across in one row is the right scale), Momentum as
 * the flat accent middle panel matching the "one visual anchor" system
 * convention.
 * =================================================================== */
.gz-svc-hero-stage{ background: var(--gz-charcoal); padding: 64px 24px 48px; }
.gz-svc-hero{ padding: 40px 44px; }
.gz-svc-hero h1{ font-size: clamp(30px,4.4vw,44px); margin: 10px 0 14px; color: #F2F0EA !important; }

.gz-svc-tier-stage{ padding: 48px 24px; background: #fff; }
.gz-svc-subhead{ text-align: center; font-size: 20px; margin: 0 0 6px; }
.gz-svc-subnote{ text-align: center; font-size: 13px; color: var(--gz-muted); max-width: 60ch; margin: 0 auto 28px; }
.gz-svc-tier-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-radius: 2px; overflow: hidden; }
.gz-svc-tier{ padding: 32px 28px; }
.gz-svc-tier.dark{ color: #F2F0EA; }
.gz-svc-tier.cream{ color: var(--gz-ink); }
.gz-svc-tier.accent{ color: var(--gz-ink); }
.gz-svc-tier-label{ display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .9; margin-bottom: 8px; }
.gz-svc-tier-price{ font-family: "JetBrains Mono", monospace; font-size: 28px; font-weight: 700; margin-bottom: 18px; }
.gz-svc-tier-price span{ font-size: 13px; font-weight: 500; opacity: .85; }
.gz-svc-tier-bullets{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gz-svc-tier-bullets li{ font-size: 13px; line-height: 1.55; padding-left: 16px; position: relative; opacity: .92; }
.gz-svc-tier-bullets li::before{ content: '\2022'; position: absolute; left: 0; opacity: .6; }
.gz-svc-tier-buy{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 20px; padding: 11px 20px; border-radius: 2px;
  font-family: "Outfit", sans-serif; font-weight: 700; font-size: 13px; text-decoration: none;
  background: var(--gz-blue); color: var(--gz-ink); transition: transform .15s ease, box-shadow .15s ease;
}
.gz-svc-tier-buy:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(21,146,184,.28); color: #fff; }
.gz-svc-tier.accent .gz-svc-tier-buy{ background: var(--gz-charcoal); color: #fff; }
.gz-svc-tier-note{ text-align: center; font-size: 12.5px; color: var(--gz-muted); margin: 20px 0 0; }
.gz-svc-tier-note a{ color: var(--gz-blue-dark); font-weight: 600; text-decoration: none; }
.gz-svc-tier-note a:hover{ text-decoration: underline; }
@media (max-width: 820px){ .gz-svc-tier-row{ grid-template-columns: 1fr; } }
.gz-svc-tier-stage + .gz-svc-tier-stage{ padding-top: 0; }

.gz-svc-proof-stage{ padding: 0 24px 48px; background: #fff; }
.gz-svc-proof{ max-width: 640px; margin: 0 auto; padding: 40px 44px; text-align: center; color: #F2F0EA; }
.gz-svc-proof-num{ font-family: "JetBrains Mono", monospace; font-size: 42px; font-weight: 700; color: var(--gz-blue-light); }
.gz-svc-proof-text{ font-size: 13.5px; color: var(--gz-mist); margin-top: 10px; max-width: 42ch; margin-left: auto; margin-right: auto; }
.gz-svc-proof-link{ display: inline-block; margin-top: 16px; font-size: 12.5px; font-weight: 700; color: var(--gz-blue-light); text-decoration: underline; }

/* Cross-sell zone — standalone-service page: pair-with / bundle-up / step-down */
.gz-crosssell-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 8px; }
.gz-crosssell-card{ flex: 1 1 240px; max-width: 320px; }
.gz-crosssell-card{
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: #fff; border: 1px solid var(--gz-line); border-radius: 2px; padding: 24px;
  text-decoration: none; color: var(--gz-ink);
  box-shadow: 0 1px 3px rgba(20,24,27,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.gz-crosssell-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(20,24,27,.2); }
.gz-crosssell-card.accent{ background: var(--gz-blue); border-color: transparent; color: var(--gz-ink); }
.gz-crosssell-card .tag{ font-family: "Outfit", sans-serif !important; font-size: 10.5px; font-weight: 600 !important; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.gz-crosssell-card.accent .tag{ opacity: .9; }
.gz-crosssell-card h3{ font-size: 17px; margin: 2px 0 0; }
.gz-crosssell-card p{ font-size: 13px; line-height: 1.55; opacity: .8; margin: 0; }
.gz-crosssell-card .link{ margin-top: 10px; font-size: 12.5px; font-weight: 700; }
.gz-crosssell-card:not(.accent) .link{ color: var(--gz-blue-dark); }

.gz-svc-work-stage{ padding: 0 24px 48px; background: #fff; }
.gz-svc-work{ max-width: 960px; margin: 0 auto; padding: 40px 44px; }
.gz-svc-work-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 18px; }
.gz-svc-work-tile{ border-radius: 2px; overflow: hidden; background: #fff; border: 1px solid var(--gz-line); }
.gz-svc-work-tile img{ width: 100%; height: 160px; object-fit: cover; display: block; }
.gz-svc-work-tile span{ display: block; padding: 12px 14px; font-size: 12.5px; font-weight: 600; }

.gz-svc-faq-stage{ padding: 0 24px 56px; background: #fff; }
.gz-svc-faq{ max-width: 780px; margin: 0 auto; padding: 40px 44px; }
.gz-svc-faq-list{ display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.gz-svc-faq-item{ padding: 18px 22px; border-radius: 2px; background: rgba(255,255,255,.04); border: 1px solid #2B3236; }
.gz-svc-faq-item h3{ font-size: 14px; margin: 0 0 6px; color: #F2F0EA; }
.gz-svc-faq-item p{ font-size: 13px; color: var(--gz-mist); margin: 0; line-height: 1.6; }
@media (max-width: 700px){
  .gz-svc-hero, .gz-svc-proof, .gz-svc-work, .gz-svc-faq{ padding: 28px 24px; }
}

/* ===================================================================
 * CASE STUDIES — genuine rebuild (batch: stop-filter-only-rebuild-
 * templates). Page had been missed entirely: plain .gz-hero + inline-
 * styled bordered divs, zero panel/motion treatment. Each case study is
 * now its own full panel, alternating tone, with a real stat row instead
 * of small inline pills.
 * =================================================================== */
.gz-cs-list-stage{ padding: 8px 24px 56px; background: #fff; }
.gz-cs-list-inner{ max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.gz-cs-case{ padding: 36px 40px; border-radius: 2px; }
.gz-cs-case.dark{ color: #F2F0EA; }
.gz-cs-case.cream{ color: var(--gz-ink); }
.gz-cs-case-tag{ font-family: "Outfit", sans-serif !important; font-weight: 600 !important; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gz-blue-light); }
.gz-cs-case.cream .gz-cs-case-tag{ color: var(--gz-blue-dark); }
.gz-cs-case-title{ font-size: 21px; margin: 10px 0 16px; color: inherit; }
/* Kadence's own h3{color:...} base rule has element-selector specificity
 * and beats plain inheritance — the same issue fixed earlier for hero h1s.
 * Explicit per-tone colors here, not reliance on `inherit`. */
.gz-cs-case.dark .gz-cs-case-title{ color: #F2F0EA; }
.gz-cs-case.cream .gz-cs-case-title{ color: var(--gz-ink); }
.gz-cs-case-body p{ font-size: 13.5px; line-height: 1.6; margin: 0 0 8px; opacity: .9; }
.gz-cs-case-stats{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.gz-cs-case-stat{ padding: 12px 18px; border-radius: 2px; background: rgba(255,255,255,.08); }
.gz-cs-case.cream .gz-cs-case-stat{ background: rgba(20,24,27,.06); }
.gz-cs-case-stat .num{ display: block; font-family: "JetBrains Mono", monospace; font-size: 21px; font-weight: 700; }
.gz-cs-case-stat .label{ display: block; font-size: 11px; opacity: .75; margin-top: 2px; max-width: 22ch; }
/* Case studies moved into the accordion (white panel background) on the
 * What We've Done page — the original stat box background (a barely-
 * visible white tint, meant for dark/cream panels) would be invisible
 * on white. */
.gz-cs-case-stat-light{ background: var(--gz-tint) !important; color: var(--gz-ink); }

/* Collapsible case-study panels on What We've Done — the panel IS the
 * trigger (same rich dark/cream card, rough edge, tag+title always
 * visible), body+stats reveal inside the same card on click. Not a
 * separate generic accordion component. */
.gz-wwd-cs-item{ cursor: default; }
.gz-wwd-cs-trigger{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; padding: 0; margin: 0; cursor: pointer; text-align: left; color: inherit;
}
.gz-wwd-cs-trigger .gz-cs-case-tag{ margin-bottom: 0; }
.gz-wwd-cs-trigger h3.gz-cs-case-title{ margin: 0; flex: 1; }
.gz-wwd-cs-chevron{ font-size: 16px; opacity: .6; transition: transform .25s ease; flex: none; }
.gz-wwd-cs-item.is-open .gz-wwd-cs-chevron{ transform: rotate(180deg); }
.gz-wwd-cs-panel{ max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(0.16,1,0.3,1); }
.gz-wwd-cs-item.is-open .gz-wwd-cs-panel{ max-height: 600px; margin-top: 18px; }

.gz-cs-pattern-stage{ padding: 0 24px 56px; background: #fff; }
.gz-cs-pattern{ padding: 36px 40px; border-radius: 2px; color: var(--gz-ink); }
.gz-cs-pattern-eyebrow{ display: block; font-family: "Outfit", sans-serif !important; font-weight: 600 !important; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; opacity: .8; }
.gz-cs-pattern p{ font-size: 14.5px; line-height: 1.7; margin: 0; }
@media (max-width: 700px){ .gz-cs-case, .gz-cs-pattern{ padding: 26px 24px; } }

/* ===================================================================
 * FULL-WIDTH HERO FIX (batch: hero-effect-fix). The rough-edge SVG
 * displacement filter was being applied directly to the full-viewport-
 * width .gz-hero/.gz-hero-home section itself — at that scale the
 * feDisplacementMap's fixed-scale distortion reads as a broken render,
 * not an intentional paper-cut edge, because the effect was designed
 * (and only ever looks right) at content-panel width. Same stage/panel
 * split every other rebuilt template already uses: a full-bleed
 * background stage with no filter, wrapping a content-width panel that
 * carries the rough edge + motion. */
.gz-hero-bg-stage{ background: var(--gz-charcoal); }
.panel.gz-hero-split{ border-radius: 2px; }
.panel.gz-hero-inner{ border-radius: 2px; max-width: 640px; margin: 0 auto; padding: 48px 44px; text-align: center; color: #F2F0EA; }
.panel.gz-hero-inner .gz-eyebrow{ color: var(--gz-blue-light); }
/* Kadence's own bare h1{color:...} rule beats plain inheritance from the
 * new dark panel ancestor (a real element selector always wins over
 * inheritance, regardless of the parent's color) — without this, hero
 * headlines render in Kadence's default dark ink, invisible on the dark
 * panel background. */
.panel.gz-hero-split h1, .panel.gz-hero-inner h1{ color: #F2F0EA !important; }
.panel.gz-hero-split p.gz-sub, .panel.gz-hero-inner p.gz-sub{ color: var(--gz-mist) !important; }
.panel.gz-hero-split h1 .accent, .panel.gz-hero-inner h1 .accent{ color: var(--gz-blue-light) !important; }

/* ===================================================================
 * CONTACT FORM 7 — had zero custom styling at all, rendering as raw
 * unstyled browser inputs (tiny, cramped, clashing badly against the
 * rest of the design system).
 * =================================================================== */
.wpcf7-form{ display: flex; flex-direction: column; gap: 18px; }
.wpcf7-form label{ display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gz-ink); }
.wpcf7-form .wpcf7-form-control-wrap{ display: block; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea{
  width: 100%; box-sizing: border-box;
  font-family: "Inter", sans-serif; font-size: 14.5px; font-weight: 400; color: var(--gz-ink);
  background: #fff; border: 1.5px solid var(--gz-line); border-radius: 2px;
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wpcf7-form textarea{ resize: vertical; min-height: 120px; }
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus{
  outline: none; border-color: var(--gz-blue); box-shadow: 0 0 0 3px rgba(33,171,218,.15);
}
.wpcf7-form input.wpcf7-not-valid, .wpcf7-form textarea.wpcf7-not-valid{ border-color: #D64545; }
.wpcf7-form .wpcf7-not-valid-tip{ font-size: 12px; color: #D64545; margin-top: 4px; font-weight: 500; }
.wpcf7-form input[type="submit"]{
  align-self: flex-start;
  font-family: "Outfit", sans-serif; font-weight: 700; font-size: 14.5px;
  background: var(--gz-blue); color: #fff; border: none; border-radius: 2px;
  padding: 13px 30px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.wpcf7-form input[type="submit"]:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(21,146,184,.28); }
.wpcf7-form input[type="submit"]:disabled{ opacity: .6; cursor: default; transform: none; }
.wpcf7-spinner{ margin-left: 10px; }
.wpcf7-response-output{
  margin-top: 16px; padding: 12px 16px; border-radius: 2px; font-size: 13px;
  border: 1px solid var(--gz-line);
}
.wpcf7-form.sent .wpcf7-response-output{ border-color: #2E9E5B; background: rgba(46,158,91,.08); color: #1D6B3D; }
.wpcf7-form.failed .wpcf7-response-output, .wpcf7-form.aborted .wpcf7-response-output{ border-color: #D64545; background: rgba(214,69,69,.08); color: #A93030; }
.wpcf7-form.invalid .wpcf7-response-output{ border-color: #E0A526; background: rgba(224,165,38,.08); color: #8A6212; }

/* ===================================================================
 * ADD TO CART BUTTON — Kadence injects a spinner icon <span> right after
 * the "Add to cart" text with no gap and no flex alignment, so the icon
 * sat hard against the text baseline instead of centered next to it.
 * =================================================================== */
.add_to_cart_button, .single_add_to_cart_button, .ajax_add_to_cart{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1.2 !important;
}
.add_to_cart_button .kadence-svg-iconset, .single_add_to_cart_button .kadence-svg-iconset{
  display: inline-flex; align-items: center; flex: none;
}

/* ===================================================================
 * QUICK LAUNCH PAGE — new dedicated page, direct-buy grid grouped into
 * Launch Marketing / Specialist Launch / Web & Logo. Each card carries a
 * full inclusion list (not a one-line summary) — enough detail to buy
 * without leaving the page.
 * =================================================================== */
.gz-ql-stage{ padding: 24px 24px; }
.gz-ql-group{ padding: 40px 44px; border-radius: 2px; }
.gz-ql-group-sub{ text-align: center; font-size: 13.5px; color: var(--gz-muted); max-width: 56ch; margin: -12px auto 24px; }

/* Quick Launch hero — explicit "this is single-channel, packages exist"
 * note so QL doesn't silently absorb buyers who actually need a package. */
.gz-ql-scope-note{
  margin-top: 28px; padding: 20px 24px; border-radius: 2px;
  background: rgba(242,240,234,.06); border: 1px solid rgba(242,240,234,.14);
  max-width: 46ch;
}
.gz-ql-scope-note p{ font-size: 13.5px; color: var(--gz-mist); line-height: 1.6; margin: 0 0 14px; }
.gz-ql-scope-note strong{ color: #F2F0EA; }
.gz-ql-group.dark .gz-ql-card{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); box-shadow: 0 10px 24px -16px rgba(0,0,0,.6); }
.gz-ql-group.dark .gz-ql-card h3{ color: #F2F0EA; }
.gz-ql-group.dark .gz-ql-bullets li{ color: var(--gz-mist); }
.gz-ql-group.accent .gz-ql-bullets li, .panel.accent .gz-ql-bullets li{ color: rgba(20,24,27,.85); }
/* Cyan .accent group: price text and Buy button were still the same bright
 * cyan as the panel itself — bright-blue-on-cyan-tinted-card sitting on a
 * cyan section is exactly the "blue on blue" problem, not a hard contrast
 * failure but visually nonsensical. Dark ink for both here instead, same
 * pattern already used for tier panels' accent variant. */
.gz-ql-group.accent .gz-ql-card{ background: rgba(255,255,255,.85); border-color: rgba(20,24,27,.18); box-shadow: 0 10px 24px -16px rgba(0,0,0,.3); }
.gz-ql-group.accent .gz-ql-price{ color: var(--gz-ink); }
/* ===== GZ-COMBO — Starter Combos, redesigned to actually look like the
 * best-value buy-now offer they are, not a quiet minicard blending into
 * the section. Hand-cut, amber-bordered, its own badge. ===== */
.gz-combo-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 20px; }
.gz-combo-card{
  flex: 1 1 300px; max-width: 380px; position: relative; isolation: isolate;
  padding: 28px 26px 24px; display: flex; flex-direction: column; gap: 8px;
  border: 2px solid var(--gz-amber-deep);
}
.gz-combo-badge{
  align-self: flex-start; font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--gz-amber-deep);
  padding: 5px 12px; margin-bottom: 6px;
}
.gz-combo-name{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: 22px; color: var(--gz-ink); }
.gz-combo-price{ font-family: "JetBrains Mono", monospace; font-size: 20px; font-weight: 700; color: var(--gz-blue-dark); }
.gz-combo-desc{ font-size: 13px; line-height: 1.6; color: var(--gz-muted); margin: 4px 0 10px; }
.gz-combo-card .gz-ql-actions{ margin-top: auto; }
.gz-combo-card .gz-ql-add{ font-size: 13.5px; padding: 11px 20px; }
@media (max-width: 480px){
  .gz-combo-card{ flex-basis: 100%; }
}

.gz-ql-group.accent .gz-ql-add{ background: var(--gz-charcoal); color: #fff; }
/* Same fix, Services hub's Diagnostic Audits zone reuses the .gz-ql-card
 * component under a plain .panel.accent wrapper, not .gz-ql-group. */
.panel.accent .gz-ql-price{ color: var(--gz-ink); }
.panel.accent .gz-ql-add{ background: var(--gz-charcoal); color: #fff; }
.panel.accent .gz-ql-buy{ color: var(--gz-ink); }
.panel.accent .gz-ql-card{ background: rgba(255,255,255,.85); border-color: rgba(20,24,27,.18); box-shadow: 0 10px 24px -16px rgba(0,0,0,.3); }
/* Flex, not grid auto-fill — an auto-fill grid strands a ragged last row
 * on the left with dead space on the right when the card count doesn't
 * divide evenly (e.g. 5 or 6 cards in a 4-wide layout). */
.gz-ql-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 8px; }
.gz-ql-card{
  flex: 1 1 240px; max-width: 300px;
  position: relative; padding: 22px 22px 24px; border-radius: 2px;
  background: #fff; border: 1px solid var(--gz-line);
  box-shadow: 0 10px 24px -16px rgba(20,24,27,.35);
  display: flex; flex-direction: column; gap: 4px;
}
.gz-ql-card h3{ font-size: 15px; margin: 0; }
.gz-ql-price{ font-family: "JetBrains Mono", monospace; font-size: 18px; font-weight: 700; color: var(--gz-blue-dark); margin: 4px 0 8px; }
.gz-ql-group.dark .gz-ql-price{ color: var(--gz-blue-light); }
.gz-ql-hook{ font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--gz-ink); margin: 0 0 10px; text-wrap: balance; }
.gz-ql-group.dark .gz-ql-hook{ color: #F2F0EA; }
.panel.accent .gz-ql-hook{ color: var(--gz-ink); }
.gz-ql-bullets{ list-style: none; margin: 0 0 16px; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.gz-ql-bullets li{ font-size: 12px; line-height: 1.5; color: var(--gz-muted); padding-left: 14px; position: relative; }
.gz-ql-bullets li::before{ content: '\2022'; position: absolute; left: 0; opacity: .55; color: var(--gz-amber-deep); }
/* .gz-ql-actions: Add to Cart is the primary action now (filled, matches
 * the funnel's actual goal — buy more than one thing before checking
 * out), Buy Now stays as a secondary ghost link for someone who
 * genuinely just wants this one item immediately. */
.gz-ql-actions{ display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.gz-ql-add{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: 2px; font-family: "Outfit", sans-serif; font-weight: 700; font-size: 12.5px;
  background: var(--gz-blue); color: var(--gz-ink); border: none; cursor: pointer;
  transition: transform .15s ease;
}
.gz-ql-add:hover{ transform: translateY(-2px); background: var(--gz-blue); color: var(--gz-ink); }
.gz-ql-add-dark:hover{ background: var(--gz-ink); color: #fff; }
.gz-ql-add:disabled{ opacity: .75; cursor: default; transform: none; }
.gz-ql-add.is-added{ background: var(--gz-sprout); color: #fff; }
.gz-ql-add-dark{ background: var(--gz-ink); color: #fff; }
.gz-ql-add-dark.is-added{ background: var(--gz-sprout-deep); }
.gz-ql-buy{
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; font-weight: 700;
  color: var(--gz-blue-dark); text-decoration: underline; text-underline-offset: 2px;
}
.gz-ql-buy:hover{ color: var(--gz-amber-deep); }
.gz-ql-buy-dark{ color: var(--gz-ink); }
.gz-ql-buy-dark:hover{ color: var(--gz-amber-deep); }
.gz-ql-group.accent .gz-ql-add, .panel.accent .gz-ql-add{ background: var(--gz-charcoal); color: #fff; }
.gz-ql-card-highlight{ border: 2px solid var(--gz-blue); }
/* This card sits alone below the marketing grid, not as one flex item
   among several — but it inherited .gz-ql-card's max-width:300px
   (sized for a card that shares a row with 3 others) with nothing to
   center or widen it, so it rendered pinned to the left edge at a
   fraction of the section's width, with a huge dead gap beside it and
   its two bullet lists (service/product) cramped into that narrow
   column. Confirmed live via screenshot. */
/* margin-top clears .gz-ql-badge's -11px absolute offset -- with 0 gap
   from .gz-ql-grid above, the badge overlapped straight into the card
   row above it. */
.gz-ql-package-card{ max-width: 640px; width: 100%; margin: 28px auto 0; flex: none; }
@media (max-width: 640px){ .gz-ql-package-card{ max-width: 100%; } }
.gz-ql-tag{ font-family: "Outfit", sans-serif !important; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--gz-blue-dark); font-weight: 600 !important; }
.gz-ql-badge{
  position: absolute; top: -11px; right: 14px; font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  background: var(--gz-blue); color: var(--gz-ink);
}

/* ===================================================================
 * FINE PRINT / TERMS ZONE — was missing entirely from the Services hub.
 * =================================================================== */
.gz-terms-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 20px; margin-top: 12px; }
.gz-terms-item{ padding: 18px 20px; border-radius: 2px; background: var(--gz-tint); border: 1px solid var(--gz-line); box-shadow: 0 6px 16px -12px rgba(20,24,27,.4); }
.gz-terms-item h3{ font-size: 13.5px; margin: 0 0 6px; color: var(--gz-ink); }
.gz-terms-item p{ font-size: 12.5px; line-height: 1.6; color: var(--gz-muted); margin: 0; }

/* Shop/Cart/Account — hide Kadence's default banner, our own hero is
 * injected via woocommerce_before_main_content instead (see functions.php). */
body.woocommerce-shop .entry-hero.product-archive-hero-section,
body.woocommerce-cart .entry-hero,
body.woocommerce-account .entry-hero{ display: none !important; }

/* Notices ("added to cart", "returning customer? login", "have a coupon")
   were completely unstyled defaults (plain light box, blue left border,
   never touched by any pass) — real treatment using the established
   cream-page palette, not the dark experiment this section used to have. */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info{
  background: var(--gz-tint) !important; border: 1px solid var(--gz-line) !important;
  border-left: 3px solid var(--gz-blue-dark) !important; border-radius: 2px;
  color: var(--gz-ink) !important; font-size: 13.5px; padding: 16px 20px !important;
}
body.woocommerce-cart .woocommerce-message a,
body.woocommerce-cart .woocommerce-info a,
body.woocommerce-checkout .woocommerce-message a,
body.woocommerce-checkout .woocommerce-info a{ color: var(--gz-blue-dark) !important; font-weight: 600; }
body.woocommerce-cart .woocommerce-message .button,
body.woocommerce-checkout .woocommerce-message .button{
  background: var(--gz-ink) !important; color: #fff !important; border-radius: 2px !important;
  padding: 9px 16px !important; font-weight: 700 !important; font-size: 12.5px !important; float: none; display: inline-block;
}
/* Belt-and-suspenders: a stray "Cart Summary" label was showing up
   visibly above the cart items in a live screenshot, not present in any
   server-rendered HTML fetch — almost certainly a screen-reader-only
   accessibility label (standard WooCommerce/Kadence pattern) that isn't
   getting properly visually hidden. Redefining it explicitly rather than
   depending on the parent theme's own rule still being intact. */
.woocommerce-cart .screen-reader-text,
.woocommerce-checkout .screen-reader-text{
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}
/* Actual source of the stray "Cart Summary" heading: Kadence's own
   parent-theme component (inc/components/woocommerce/component.php,
   cart_summary_title()) hooked to woocommerce_before_cart_table — a
   real, deliberately-visible heading, not a screen-reader label. This
   page has its own section title ("N items, Ready When You Are.") doing
   the same job, so Kadence's is hidden rather than duplicated. Hiding
   here instead of unhooking it in PHP — lower risk, doesn't touch
   whatever else Kadence's WooCommerce integration ties to that hook. */
/* Kadence's own injected "Cart Summary" heading (component.php's
   cart_summary_title(), hooked to woocommerce_before_cart_table) — was
   only hidden on the old standalone cart page; the same cart markup now
   also renders on checkout (single-page checkout merge), where this
   rule didn't reach it, so the stray heading reappeared there.
   Confirmed live. */
body.woocommerce-cart .cart-summary,
body.woocommerce-checkout .cart-summary{ display: none !important; }

/* ===================================================================
 * CART — genuine template override (woocommerce/cart/cart.php), a
 * self-contained page built the same way as Quick Launch: its own hero
 * stage, a .gz-section with a real staggered-reveal grid of .panel
 * cards (same DOM/animation system as .gz-ql-card, not table rows), and
 * a distinct featured section for the total. Not styling layered onto
 * WooCommerce's default output.
 * =================================================================== */
.gz-wc-hero-stage{ background: var(--gz-cream); padding: 72px 24px 8px; text-align: center; }
.gz-wc-hero-stage-inner{ max-width: 640px; margin: 0 auto; }
.gz-wc-hero-stage-inner h1{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(30px,4.2vw,44px); margin: 0 0 12px; color: var(--gz-ink); }
.gz-wc-hero-stage-inner .gz-sub{ font-size: 15px; color: var(--gz-muted); max-width: 52ch; margin: 0 auto; }

/* float:left with no explicit width (Kadence/WooCommerce legacy default)
   makes this shrink-to-fit its content instead of filling its parent —
   confirmed live at a real 1920px viewport: parent was 1318px wide, the
   form itself rendered at 807px, leaving a huge dead margin next to the
   cart. Same root cause questioned as "layout issues" on cart/checkout/
   product generally. */
.woocommerce-cart-form{ background: none; box-shadow: none; padding: 0 !important; float: none !important; width: 100% !important; }
.gz-cart-grid{
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px;
}
.gz-cart-card{
  flex: 1 1 100%; position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 20px;
  background: #fff; border: 1px solid var(--gz-line); border-left: 4px solid var(--gz-blue); border-radius: 2px;
  box-shadow: 0 10px 24px -16px rgba(20,24,27,.25);
  padding: 22px 26px;
}
/* Base .panel system adds a wobbly clip-path ::before to every .panel —
   cancelled here to match .gz-ql-card's actual recipe (plain border),
   keeping only the entrance animation (opacity/blur/slide/rotate). */
.gz-cart-card::before{ clip-path: none !important; content: none !important; }
.gz-cart-card-kicker{
  display: block; font-family: "Outfit", sans-serif !important; font-size: 10px; font-weight: 600 !important;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gz-blue-dark); opacity: .75; margin-bottom: 4px;
}
.gz-cart-card-main{ display: flex; flex-direction: column; gap: 5px; flex: 1 1 220px; }
.gz-cart-card-name{ color: var(--gz-ink); font-family: "Outfit", sans-serif; font-weight: 700; font-size: 18px; }
.gz-cart-card-name a{ color: inherit; text-decoration: none; }
.gz-cart-card-price{ font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: var(--gz-muted); }
.gz-cart-card-controls{ display: flex; align-items: center; gap: 20px; }
.gz-cart-card-qty .quantity{ display: inline-flex; }
.gz-cart-card-qty .quantity input{
  border: 1.5px solid var(--gz-line); border-radius: 2px; padding: 9px 6px; width: 52px; text-align: center;
  font-family: "JetBrains Mono", monospace; font-weight: 700; background: var(--gz-tint); color: var(--gz-ink);
}
.gz-cart-card-subtotal{
  font-family: "JetBrains Mono", monospace; font-weight: 800; font-size: 17px; color: var(--gz-blue-dark); white-space: nowrap;
}
.gz-cart-card-remove a{
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  color: var(--gz-muted); font-size: 17px; line-height: 1; border: 1px solid var(--gz-line); border-radius: 50%;
  text-decoration: none; transition: border-color .15s ease, color .15s ease;
}
.gz-cart-card-remove a:hover{ color: #D64545; border-color: #D64545; background: none; }
.gz-cart-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 28px; }
.gz-cart-actions .coupon{ display: flex; gap: 8px; flex: 1 1 260px; }
.gz-cart-actions .coupon input#coupon_code{
  border: 1.5px solid var(--gz-line); border-radius: 2px; padding: 10px 12px; font-size: 13px; font-family: inherit; flex: 1;
  color: var(--gz-ink); background: #fff;
}
/* Apply coupon / Update cart — WooCommerce's own stock <button class="button">,
   same spinner-icon-with-no-gap problem the Add to Cart button had
   (Kadence injects an SVG spinner right against the label with no flex
   alignment), never covered by that fix since it only targeted the
   add_to_cart_button classes specifically. */
.gz-cart-actions button{
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
  background: var(--gz-ink) !important; color: #fff !important; border: none !important; border-radius: 2px !important;
  font-family: "Outfit", sans-serif !important; font-weight: 700 !important; font-size: 13px !important;
  line-height: 1.2 !important; padding: 13px 22px !important; cursor: pointer;
}
.gz-cart-actions button:hover{ background: var(--gz-blue) !important; color: var(--gz-ink) !important; }
.gz-cart-actions button .kadence-svg-iconset{ display: inline-flex; align-items: center; flex: none; }
.gz-cart-actions button:disabled{ opacity: .5; cursor: default; }

/* Totals — its own dedicated section (dark tint ground), the total
   itself a featured accent card, matching .gz-combo-card's real recipe
   (solid border, badge tag) rather than a sidebar box next to the form. */
.gz-cart-total-stage{ background: var(--gz-tint); padding: 56px 24px; }
/* Was `display:flex; justify-content:flex-end` — with no flex-basis set,
   .cart-collaterals' own `width:100%` resolved against the flex
   container in a way that collapsed it to a sliver (reproduced live:
   the CART TOTALS badge and Proceed-to-checkout button both wrapped to
   one character per line). Plain block layout + margin-left:auto is the
   same right-alignment with none of that flex-sizing ambiguity — this
   is the exact technique that was already working before. */
.gz-cart-total-inner{ max-width: 1080px; margin: 0 auto; }
.cart-collaterals{ max-width: 440px; margin-left: auto; }
/* Checkout's version of this box shows a full product-name/subtotal
   table (cart's totals box never does — just Subtotal/Total labels),
   which needs real room. Widened specifically here rather than for
   every use of .cart-collaterals. */
/* Widened from 520px — now that the rest of checkout properly fills a
   wide viewport (see the .woocommerce-cart-form/#customer_details float
   fixes elsewhere in this file), a 520px box floating in what's now a
   much wider section reads as small/disconnected rather than deliberate. */
.gz-checkout-review-inner .cart-collaterals{ max-width: 680px; }
.cart-collaterals::before{ clip-path: none !important; content: none !important; }
.cart-collaterals .cart_totals{
  position: relative; background: var(--gz-charcoal); color: #F2F0EA;
  border: 2px solid var(--gz-blue); border-radius: 2px;
  padding: 30px 30px 28px; width: 100%;
}
.cart-collaterals .cart_totals h2{
  display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: #fff; background: var(--gz-blue-dark);
  padding: 5px 12px; margin: 0 0 18px;
}
.cart-collaterals .cart_totals table{ width: 100%; border-collapse: collapse; }
.cart-collaterals .cart_totals table th, .cart-collaterals .cart_totals table td{
  padding: 13px 0; border-bottom: 1px dashed rgba(242,240,234,.18); font-size: 13.5px; color: var(--gz-mist);
}
.cart-collaterals .cart_totals table th{ font-weight: 600; text-align: left; }
.cart-collaterals .cart_totals table td{ text-align: right; font-family: "JetBrains Mono", monospace; }
.cart-collaterals .cart_totals .order-total{ display: block; margin-top: 8px; padding-top: 8px; }
.cart-collaterals .cart_totals .order-total th, .cart-collaterals .cart_totals .order-total td{
  display: block; width: 100%; text-align: left; border-bottom: none; padding: 0;
}
.cart-collaterals .cart_totals .order-total th{
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gz-mist); font-weight: 600; margin-bottom: 6px;
}
.cart-collaterals .cart_totals .order-total td{
  font-family: "JetBrains Mono", monospace; font-weight: 800; font-size: 36px; color: #fff; line-height: 1;
}
@media (max-width: 780px){
  .gz-cart-card{ padding: 18px 20px; }
  .cart-collaterals{ max-width: none; margin-left: 0; }
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display: block; padding: 12px 16px; border-radius: 2px; color: var(--gz-ink); text-decoration: none; font-weight: 600; font-size: 14px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background: var(--gz-charcoal); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{ background: var(--gz-tint); }
.woocommerce-account .woocommerce-MyAccount-content{ padding-top: 8px; }
.woocommerce-account fieldset{ border: 1px solid var(--gz-line); border-radius: 2px; padding: 20px; }
.woocommerce-account .woocommerce-Button{
  background: var(--gz-blue) !important; color: #fff !important; border-radius: 2px !important;
  font-weight: 700 !important; padding: 12px 24px !important; border: none !important;
}

/* ===================================================================
 * WHAT WE'VE DONE — merged Case Studies + Portfolio page. Portfolio
 * becomes an accordion: opening one category closes the others.
 * =================================================================== */
.gz-wwd-accordion-stage{ padding: 24px 24px 56px; background: #fff; }
.gz-wwd-accordion{ max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
/* Portfolio accordion tiles — rough-edge, tone-alternating, matching the
 * rest of the site (was plain white bordered rows, looked like a generic
 * dropdown component with no connection to the paper-cut system). */
.gz-wwd-item{ position: relative; isolation: isolate; border-radius: 2px; overflow: visible; }
.gz-wwd-item::before{
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: inherit; clip-path: url(#gz-clip-lg);
}
.gz-wwd-item.dark{ background: var(--gz-charcoal); }
.gz-wwd-item.cream{ background: var(--gz-cream); }
.gz-wwd-item.accent{ background: var(--gz-blue); }
.gz-wwd-trigger{
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; background: none; border: none; cursor: pointer; text-align: left;
}
.gz-wwd-item.dark .gz-wwd-trigger-num{ color: var(--gz-blue-light); }
.gz-wwd-item.dark .gz-wwd-trigger-label{ color: #F2F0EA; }
.gz-wwd-item.dark .gz-wwd-trigger-count{ color: var(--gz-mist); }
.gz-wwd-item.dark .gz-wwd-trigger-chevron{ color: var(--gz-mist); }
.gz-wwd-item.cream .gz-wwd-trigger-num{ color: var(--gz-blue-dark); }
.gz-wwd-item.accent .gz-wwd-trigger-num{ color: rgba(20,24,27,.9); }
.gz-wwd-item.cream .gz-wwd-trigger-label,
.gz-wwd-item.accent .gz-wwd-trigger-label{ color: var(--gz-ink); }
.gz-wwd-item.cream .gz-wwd-trigger-count{ color: var(--gz-muted); }
.gz-wwd-item.accent .gz-wwd-trigger-count{ color: rgba(20,24,27,.85); }
.gz-wwd-item.cream .gz-wwd-trigger-chevron,
.gz-wwd-item.accent .gz-wwd-trigger-chevron{ color: var(--gz-ink); opacity: .6; }
.gz-wwd-trigger-num{ font-family: "JetBrains Mono", monospace; font-size: 11px; }
.gz-wwd-trigger-label{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 16px; }
.gz-wwd-trigger-count{ font-size: 12px; margin-left: auto; }
.gz-wwd-trigger-chevron{ font-size: 14px; transition: transform .25s ease; }
.gz-wwd-item.is-open .gz-wwd-trigger-chevron{ transform: rotate(180deg); }
.gz-wwd-panel{
  max-height: 0; overflow: hidden;
  transition: max-height .35s cubic-bezier(0.16,1,0.3,1);
}
.gz-wwd-item.is-open .gz-wwd-panel{ max-height: 3000px; }
.gz-wwd-panel > *{ padding: 4px 22px 24px; background: #fff; }

/* ===================================================================
 * CHECKOUT — CSS-only styling, no markup or logic touched (the actual
 * purchase flow). Same unstyled-browser-defaults problem the contact
 * form and cart had.
 * =================================================================== */
/* Kadence/WooCommerce's default .col2-set carries float:left with no
   explicit width — a flex display was layered on top here to actually
   lay out col-1/col-2 side by side, but the float still made the
   container itself shrink-to-fit rather than filling its parent.
   Confirmed live at a real 1920px viewport: #customer_details rendered
   at 540px inside a 1080px-wide section. float:none + width:100%
   override that. */
/* align-items:flex-start, not the flex default (stretch) — billing has
   ~9 fields, "Additional information" has one textarea; stretch forced
   the shorter card to match the taller one's height, leaving a mostly
   empty white box with nothing in the bottom two-thirds of it.
   Confirmed live. */
.woocommerce-checkout #customer_details{ display: flex; align-items: flex-start; gap: 32px; flex-wrap: wrap; float: none !important; width: 100% !important; }
.woocommerce-checkout .col-1, .woocommerce-checkout .col-2{ flex: 1 1 320px; float: none !important; }
.woocommerce-checkout .form-row label{ font-size: 12.5px; font-weight: 600; color: var(--gz-ink); margin-bottom: 4px; display: block; }
.woocommerce-checkout input.input-text, .woocommerce-checkout select, .woocommerce-checkout textarea{
  width: 100%; box-sizing: border-box; font-family: "Inter", sans-serif; font-size: 14.5px;
  background: #fff; border: 1.5px solid var(--gz-line); border-radius: 2px; padding: 11px 13px;
}
.woocommerce-checkout input.input-text:focus, .woocommerce-checkout select:focus{ outline: none; border-color: var(--gz-blue); box-shadow: 0 0 0 3px rgba(33,171,218,.15); }
/* #order_review's own tint-background box + plain shop_table rules that
   used to live here are gone — fully superseded by the later hand-cut
   charcoal receipt panel (body.woocommerce-checkout #order_review, further
   down this file), which wins on both specificity and !important, so this
   was dead leftover from the pre-redesign pass, not doing anything. */
/* color:ink is required here, not cosmetic — #payment sits inside
   #order_review, which sets light cream text (#F2F0EA) for its own dark
   charcoal fill. #payment's own background is light tint, so without its
   own color override the "no payment methods" text and privacy-policy
   copy inherit near-white text on a near-white box (reproduced live —
   read as blank/washed-out). */
.woocommerce-checkout #payment{ background: var(--gz-tint); color: var(--gz-ink); border-radius: 2px; margin-top: 20px; padding: 16px 20px; }
.woocommerce-checkout #payment ul.payment_methods{ list-style: none; padding: 16px 20px 0; margin: 0; }
.woocommerce-checkout #payment .payment_box{ background: #fff; border-radius: 2px; padding: 14px 16px; margin: 10px 0 16px; font-size: 13px; }
/* !important required: #payment is a descendant of #order_review, and
 * "body.woocommerce-checkout #order_review p{ color: var(--gz-mist)
 * !important }" above (written for paragraphs sitting directly on
 * #order_review's own dark charcoal fill) also matches any <p> inside
 * #payment — same near-invisible-text bug, one level deeper, reproduced
 * live: without !important here the mist-on-dark rule wins regardless
 * of this rule's higher specificity, because !important beats
 * specificity, not the other way round. */
body.woocommerce-checkout #payment p{ color: var(--gz-ink) !important; font-size: 13.5px; line-height: 1.6; }
body.woocommerce-checkout #payment a{ color: var(--gz-blue-dark) !important; }
/* A second, conflicting #place_order rule (white text instead of the
   real one's dark ink) used to live here — deleted. body.woocommerce-
   checkout #place_order above is the real definition. */

/* ===================================================================
 * GZ-SVC — "What We Do" hub: hero, Quick Launch/Package teasers, the
 * 11-ladder standalone catalog, AI services, and the smaller one-off
 * minicards (Beyond the Core, Diagnostic Audits). Tiercards stay flat
 * (no hand-cut clip-path) on purpose — at this density a dense pricing
 * grid reads better with clean edges; the wobble motif does its job
 * elsewhere on the page (hero, teasers, closing CTA).
 * =================================================================== */
.gz-svc-hub-hero-stage{ padding: 84px 24px 20px; text-align: center; background: var(--gz-cream); }
.gz-svc-hub-hero-inner{ max-width: 760px; margin: 0 auto; }
.gz-svc-hub-hero-inner h1{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: clamp(30px,4.4vw,48px); line-height: 1.08; margin: 18px 0 16px; text-wrap: balance; }
.gz-svc-hub-hero-inner .gz-sub{ font-size: 16px; line-height: 1.6; color: var(--gz-muted); max-width: 56ch; margin: 0 auto; }

.gz-section-sub{ font-size: 14.5px; color: var(--gz-muted); max-width: 56ch; margin: 10px auto 0; line-height: 1.55; }

.gz-svc-teaser-row{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.gz-svc-teaser-row-3{ grid-template-columns: repeat(3, 1fr); }
.gz-svc-teaser{
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 8px;
  padding: 26px 24px; text-decoration: none; border-radius: 2px;
}
.gz-svc-teaser .k{ font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; opacity: .75; }
.gz-svc-teaser h3{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 20px; margin: 0; }
.gz-svc-teaser p{ font-size: 13px; line-height: 1.55; margin: 0; flex: 1; }
.gz-svc-teaser .cta{ font-size: 13px; font-weight: 700; margin-top: 4px; }
/* Color set explicitly per element on every tone, never left to inherit —
   Kadence's own bare h3{color} selector beats an inherited (zero-
   specificity) value, so a parent's `color` alone silently fails to reach
   the heading. Same confirmed bug as .gz-home-path; fixed the same way. */
.gz-svc-teaser.dark{ background: var(--gz-charcoal); color: #F2F0EA; }
.gz-svc-teaser.dark h3, .gz-svc-teaser.dark .cta{ color: #F2F0EA; }
.gz-svc-teaser.dark p{ color: var(--gz-mist); }
.gz-svc-teaser.dark .k{ color: var(--gz-amber-light); }
.gz-svc-teaser.dark .gz-choice-cta{ border-color: #F2F0EA; color: #F2F0EA; }
.gz-svc-teaser.dark .gz-choice-cta:hover{ background: #F2F0EA; color: var(--gz-charcoal); }
.gz-svc-teaser.accent{ background: var(--gz-blue); color: var(--gz-ink); }
.gz-svc-teaser.accent h3, .gz-svc-teaser.accent p, .gz-svc-teaser.accent .cta, .gz-svc-teaser.accent .k{ color: var(--gz-ink); }
.gz-svc-teaser.cream{ background: #fff; color: var(--gz-ink); box-shadow: 0 8px 20px -14px rgba(20,24,27,.3), 0 0 0 1px rgba(20,24,27,.14); }
.gz-svc-teaser.cream h3, .gz-svc-teaser.cream p, .gz-svc-teaser.cream .cta{ color: var(--gz-ink); }
.gz-svc-teaser.cream .k{ color: var(--gz-amber-deep); }

.gz-tiercard-list{ display: flex; flex-direction: column; gap: 16px; }
.gz-tiercard{
  background: #fff; border: 1px solid var(--gz-line); border-radius: 2px;
  overflow: hidden;
}
/* Accordion: header row always visible (name, tag, "From $X" so a
   collapsed card still tells you something, and a real Full Detail link
   sitting outside the toggle button so it stays independently clickable);
   the full tier breakdown collapses by default — with 11 standalone
   services this was a full-page wall of always-expanded detail before. */
.gz-tiercard-head{ display: flex; align-items: stretch; }
.gz-tiercard-toggle{
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 22px 16px 22px 24px; font: inherit; color: inherit;
}
.gz-tiercard-toggle:focus-visible{ outline: 2px dashed var(--gz-blue-dark); outline-offset: -3px; }
.gz-tiercard-toggle:hover{ background: none; color: inherit; }
.gz-tiercard-toggle[aria-expanded="true"]{ background: none; color: inherit; }
.gz-tiercard-toggle-main h3{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 19px; margin: 0 0 4px; transition: color .15s ease; }
.gz-tiercard-toggle:hover .gz-tiercard-toggle-main h3{ color: var(--gz-blue-dark); }
.gz-tiercard-toggle-main p{ font-size: 13px; color: var(--gz-muted); margin: 0; }
.gz-tiercard-toggle-price{ font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; color: var(--gz-blue-dark); white-space: nowrap; }
.gz-tiercard-chevron{ font-size: 11px; color: var(--gz-muted); transition: transform .25s ease; flex-shrink: 0; }
.gz-tiercard.is-open .gz-tiercard-chevron{ transform: rotate(180deg); }
.gz-tiercard-link, .gz-tiercard-ask{ font-size: 12.5px; font-weight: 700; color: var(--gz-blue-dark); text-decoration: none; white-space: nowrap; }
.gz-tiercard-link{ align-self: center; margin-right: 24px; }
.gz-tiercard-link:hover, .gz-tiercard-ask:hover{ text-decoration: underline; }
.gz-tiercard-ask{ display: inline-block; margin: 16px 24px 4px; }
.gz-tiercard-body{ max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.gz-tiercard.is-open .gz-tiercard-body{ max-height: 900px; }
.gz-tiercard-tiers{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px 24px 24px; border-top: 1px solid var(--gz-line); }
.gz-tiercard-tier{ display: flex; flex-direction: column; gap: 4px; }
.gz-tiercard-tier + .gz-tiercard-tier{ border-left: 1px solid var(--gz-line); padding-left: 20px; }
.gz-tiercard-tier .lbl{ font-family: "Outfit", sans-serif !important; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600 !important; color: var(--gz-muted); }
.gz-tiercard-tier .prc{ font-family: "JetBrains Mono", monospace; font-size: 17px; font-weight: 700; color: var(--gz-blue-dark); margin-bottom: 4px; }
.gz-tiercard-tier ul{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.gz-tiercard-tier li{ font-size: 12.5px; line-height: 1.45; color: var(--gz-ink); padding-left: 13px; position: relative; }
.gz-tiercard-tier li::before{ content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--gz-blue); }

.gz-mini-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.gz-minicard-list{ display: flex; flex-direction: column; gap: 10px; }
.gz-minicard-list-row{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 14px; justify-content: center; }
/* max-width caps flex-grow -- with only 2 items (e.g. the Graphic Design
   row) unbounded grow stretched each card to ~535px, visibly bigger/
   different than the same class used a few rows down where 4 items
   (Diagnostic Audits) share the row and land near 260px. Capping keeps
   card size consistent regardless of how many happen to be in a row. */
.gz-minicard-list-row .gz-minicard{ flex: 1 1 260px; max-width: 340px; }
.gz-beyond-note{ max-width: 640px; margin: 0 auto; text-align: center; font-size: 14.5px; color: var(--gz-muted); }
.gz-beyond-cta{
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  background: var(--gz-blue); color: var(--gz-ink); font-family: "Outfit", sans-serif; font-weight: 700;
  font-size: 14px; padding: 13px 24px; border-radius: 2px; text-decoration: none; transition: opacity .15s ease;
}
.gz-beyond-cta:hover{ opacity: .85; }
.gz-ql-package-note{ max-width: 620px; margin: 28px auto 0; padding: 20px 24px; text-align: center; background: var(--gz-tint); border: 1px solid var(--gz-line); border-radius: 10px; }
.gz-ql-package-note p{ font-size: 14.5px; color: var(--gz-ink); margin: 0 0 12px; }
.gz-ql-package-note strong{ color: var(--gz-blue-dark); }
.gz-minicard{
  background: #fff; border: 1px solid var(--gz-line); border-radius: 2px;
  padding: 14px 18px; display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: baseline;
}
.gz-minicard .nm{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 14.5px; }
.gz-minicard .pr{ font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; color: var(--gz-blue-dark); white-space: nowrap; }
.gz-minicard p{ grid-column: 1 / -1; font-size: 12.5px; color: var(--gz-muted); margin: 2px 0 0; line-height: 1.5; }
.gz-minicard.accent{ background: var(--gz-blue); border-color: var(--gz-blue); }
.gz-minicard.accent .nm, .gz-minicard.accent p{ color: var(--gz-ink); }
.gz-minicard.accent .pr{ color: var(--gz-ink); }
.gz-minicard.accent .gz-tiercard-link{ color: var(--gz-ink); }
/* No .dark variant existed at all — combining generic .panel.dark's
   charcoal background with this component's own default dark-ink text
   (assumed a light card) produced near-invisible text, confirmed live
   at a 1.17 contrast ratio on the About page stat trio. */
.gz-minicard.dark{ background: var(--gz-charcoal); border-color: var(--gz-charcoal); }
.gz-minicard.dark .nm, .gz-minicard.dark p{ color: #F2F0EA; }
.gz-minicard.dark .pr{ color: var(--gz-blue-light); }
.gz-mini-note{ font-size: 12px; color: var(--gz-muted); margin-top: 10px; }
.gz-mini-note a{ color: var(--gz-blue-dark); font-weight: 700; }
.gz-mini-whatsapp{
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700;
  color: #128C4A; text-decoration: none;
}
.gz-mini-whatsapp:hover{ text-decoration: underline; }


@media (max-width: 860px){
  .gz-svc-teaser-row, .gz-svc-teaser-row-3{ grid-template-columns: 1fr; }
  .gz-tiercard-tiers{ grid-template-columns: 1fr; gap: 14px; }
  .gz-tiercard-tier + .gz-tiercard-tier{ border-left: none; padding-left: 0; border-top: 1px solid var(--gz-line); padding-top: 14px; }
  .gz-tiercard.is-open .gz-tiercard-body{ max-height: 1600px; }
  /* Was flex-wrap on a 2-child flex row (toggle button + Full Detail
     link) with the price hidden -- the link wrapped onto its own line
     but kept the wrapped-flex-row's default alignment (flex-start on a
     new line, no relation to the title block above it), reading as a
     floating, disconnected element instead of part of this card's
     header. Confirmed live via screenshot. flex-direction:column
     stacks the toggle button and the link predictably instead of
     leaving their relationship to wrap behavior. */
  .gz-tiercard-head{ flex-direction: column; align-items: stretch; }
  .gz-tiercard-toggle{ padding-right: 12px; }
  .gz-tiercard-toggle-price{ display: none; }
  .gz-tiercard-link{ align-self: flex-start; margin: 0 0 16px 24px; }
  .gz-mini-cols{ grid-template-columns: 1fr; gap: 32px; }
}

/* ===================================================================
 * GZ-CALC — "What Would It Cost": the flagship interactive calculator.
 * Selection state is visual + additive (click a tier to add, click again
 * to remove), the bottom bar stays quiet until something's selected then
 * rises with a shadow, and the upsell line only ever appears once it's
 * actually true (2+ services, running total past a package price).
 * =================================================================== */
.gz-calc-hero-stage{ padding: 84px 24px 32px; text-align: center; background: var(--gz-cream); }
.gz-calc-hero-inner{ max-width: 720px; margin: 0 auto; }
.gz-calc-hero-inner h1{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: clamp(30px,4.4vw,46px); line-height: 1.1; margin: 18px 0 16px; text-wrap: balance; }
.gz-calc-hero-inner .gz-sub{ font-size: 15.5px; line-height: 1.6; color: var(--gz-muted); max-width: 54ch; margin: 0 auto 28px; }
.gz-calc-toggles{ display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* "pricing tool doesn't switch prices when i change product and service" --
   it never did, by design (no service is priced differently by business
   type, confirmed against the real data); it only changes which bundled
   package gets recommended once services are picked. With nothing
   selected yet -- the first thing anyone does -- toggling it produced
   zero visible feedback, reading as broken. This hint is the fix. */
.gz-calc-toggle-group{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gz-calc-toggle-hint{ font-size: 11.5px; color: var(--gz-mist); max-width: 34ch; text-align: center; line-height: 1.4; }
.gz-calc-toggle{ display: inline-flex; background: #fff; border: 1px solid var(--gz-line); border-radius: 999px; padding: 3px; }
.gz-calc-toggle button{
  border: none; background: none; cursor: pointer; padding: 8px 16px; border-radius: 999px;
  font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--gz-muted); transition: background .18s ease, color .18s ease;
}
.gz-calc-toggle button.is-on{ background: var(--gz-ink); color: #fff; }
.gz-calc-toggle button:hover{ background: none; color: var(--gz-muted); }
.gz-calc-toggle button.is-on:hover{ background: var(--gz-ink); color: #fff; }

.gz-calc-inner{ max-width: 1180px; padding-bottom: 40px; }
.gz-calc-layout{ display: grid; grid-template-columns: 1fr 320px; gap: 30px; align-items: start; }
.gz-calc-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.gz-calc-card{
  flex: 1 1 260px;
  background: #fff; border: 1.5px solid var(--gz-line); border-radius: 2px;
  padding: 18px 18px 16px; transition: border-color .18s ease, box-shadow .18s ease;
}
.gz-calc-card.is-selected{ border-color: var(--gz-blue); box-shadow: 0 0 0 3px rgba(33,171,218,.12); }
.gz-calc-card-head h3{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 15.5px; margin: 0 0 3px; }
.gz-calc-card-head p{ font-size: 12px; color: var(--gz-muted); margin: 0 0 14px; }
.gz-calc-tiers{ display: flex; flex-direction: column; gap: 6px; }
.gz-calc-tier-btn{
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--gz-tint); border: 1.5px solid transparent; border-radius: 2px; cursor: pointer;
  padding: 10px 12px; text-align: left; width: 100%;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.gz-calc-tier-btn:hover{ transform: translateY(-1px); border-color: var(--gz-blue); background: var(--gz-tint); color: inherit; }
.gz-calc-tier-btn .incl{ font-size: 11.5px; line-height: 1.4; font-weight: 600; color: var(--gz-ink); }
.gz-calc-tier-btn .prc{ font-family: "JetBrains Mono", monospace; font-size: 12.5px; font-weight: 700; color: var(--gz-blue-dark); white-space: nowrap; flex: none; }
.gz-calc-tier-btn.is-selected{ background-color: var(--gz-blue) !important; border-color: var(--gz-blue-dark) !important; }
.gz-calc-tier-btn.is-selected .incl{ color: var(--gz-ink) !important; }
.gz-calc-tier-btn.is-selected .prc{ color: var(--gz-ink) !important; }

/* ===== "Your Plan" ledger panel — replaces the old bottom count/sum bar.
 * The point of a plan-BUILDING tool (vs. a product grid with an add-to-
 * cart strip) is seeing what you've built as you build it: itemised,
 * removable, always visible while picking more. ===== */
.gz-plan-panel{
  position: sticky; top: 24px; background: #fff; border: 1px solid var(--gz-line);
  box-shadow: 0 20px 44px -30px rgba(20,24,27,.32);
  display: flex; flex-direction: column; max-height: calc(100vh - 48px);
  transition: box-shadow .3s ease, border-color .3s ease;
}
/* Fires when the chat adds something to the plan — makes it unmistakable
   that asking a question just changed the panel sitting right there,
   not a separate disconnected answer. */
.gz-plan-panel-pulse{ border-color: var(--gz-blue); box-shadow: 0 0 0 3px rgba(33,171,218,.25), 0 20px 44px -30px rgba(20,24,27,.32); }
.gz-plan-panel-head{ padding: 20px 20px 14px; border-bottom: 1px solid var(--gz-line); flex: none; }
.gz-plan-panel-head .k{ display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gz-amber-deep); margin-bottom: 6px; }
.gz-plan-panel-head h3{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 16.5px; margin: 0; color: var(--gz-ink); }
.gz-plan-items{ flex: 1 1 auto; overflow-y: auto; padding: 4px 20px; min-height: 40px; }
.gz-plan-empty{ font-size: 12.5px; line-height: 1.6; color: var(--gz-muted); padding: 18px 0; margin: 0; text-align: center; }
.gz-plan-item{
  display: flex; align-items: flex-start; gap: 8px; padding: 12px 0; border-bottom: 1px dashed var(--gz-line);
  animation: gz-plan-item-snap .4s cubic-bezier(.2,.9,.3,1.3) both;
}
@keyframes gz-plan-item-snap{
  0%{ opacity: 0; transform: translateX(-14px) scale(.92); }
  100%{ opacity: 1; transform: translateX(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){ .gz-plan-item{ animation: none; } }
/* Running total gives a real tactile beat every time the plan changes —
   the number itself, not just the list under it. */
.gz-plan-subtotal-pulse .v{ animation: gz-total-pulse .45s ease; }
@keyframes gz-total-pulse{
  0%{ transform: scale(1); color: var(--gz-blue-dark); }
  35%{ transform: scale(1.16); color: var(--gz-blue); }
  100%{ transform: scale(1); color: var(--gz-blue-dark); }
}
@media (prefers-reduced-motion: reduce){ .gz-plan-subtotal-pulse .v{ animation: none; } }
/* A selected tier button gets a real "locked in" beat, not just a color swap. */
.gz-calc-tier-btn.is-selected{ animation: gz-tier-lock .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes gz-tier-lock{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.035); }
  100%{ transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){ .gz-calc-tier-btn.is-selected{ animation: none; } }
.gz-plan-item:last-child{ border-bottom: none; }
.gz-plan-item-info{ display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gz-plan-item-name{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 12.5px; color: var(--gz-ink); line-height: 1.3; }
.gz-plan-item-incl{ font-size: 11px; line-height: 1.4; color: var(--gz-muted); }
.gz-plan-item-price{ font-family: "JetBrains Mono", monospace; font-size: 12.5px; font-weight: 700; color: var(--gz-ink); white-space: nowrap; flex: none; }
.gz-plan-item-remove{ background: none; border: none; cursor: pointer; color: #B7BCBE; font-size: 17px; line-height: 1; padding: 0 0 0 4px; flex: none; }
.gz-plan-item-remove:hover{ color: #D64545; background: none; }
.gz-plan-upsell{
  font-size: 12px; line-height: 1.55; color: var(--gz-ink);
  padding: 0; margin: 0; flex: none; overflow: hidden;
}
.gz-plan-upsell.is-unlocked{
  background: linear-gradient(165deg, rgba(217,154,62,.14), rgba(33,171,218,.1));
  border-top: 2px solid var(--gz-amber-deep); border-bottom: 1px solid var(--gz-line);
  padding: 16px 20px 18px;
}
/* Same panel, standalone on the real cart page instead of tucked in the
 * /pricing/ sidebar — needs its own width/spacing/border-radius rather
 * than relying on a parent card to contain it. */
.gz-cart-unlock{
  position: relative; isolation: isolate;
  max-width: 900px; margin: 0 auto 24px; padding: 24px 28px !important;
  border: none;
}
.gz-cart-unlock::before{
  content: ''; position: absolute; inset: 0; z-index: -1; background: inherit; clip-path: url(#gz-clip-lg);
}
.gz-cart-unlock > *{ position: relative; z-index: 1; }
.gz-cart-unlock .gz-unlock-lede{ font-size: 14px; }
.gz-cart-unlock .gz-unlock-switch{ max-width: 340px; }
.gz-unlock-badge{
  display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--gz-amber-deep);
  padding: 4px 10px; margin-bottom: 10px;
}
.gz-unlock-lede{ font-size: 13px; line-height: 1.55; margin: 0 0 10px; }
.gz-unlock-gains{ list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.gz-unlock-gains li{ font-size: 11.5px; line-height: 1.5; color: var(--gz-muted); }
.gz-unlock-gains li strong{ color: var(--gz-ink); }
.gz-unlock-extra{ font-size: 11.5px; line-height: 1.5; color: var(--gz-muted); margin: 0 0 8px; }
.gz-unlock-savings{ font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; color: var(--gz-blue-dark); margin: 0 0 12px; }
.gz-unlock-terms{ font-size: 11px; line-height: 1.5; color: var(--gz-muted); margin: 0 0 12px; padding: 8px 10px; background: rgba(20,24,27,.04); border-left: 2px solid var(--gz-line); }
.gz-plan-upsell a{ color: var(--gz-blue-dark); font-weight: 700; text-decoration: none; }
.gz-plan-upsell a:hover{ text-decoration: underline; }
.gz-plan-upsell.is-unlocked .gz-btn{ display: inline-flex; width: 100%; justify-content: center; }
.gz-unlock-switch:disabled{ opacity: .6; cursor: default; }
.gz-unlock-viewlink{ display: block; text-align: center; font-size: 11.5px; color: var(--gz-muted); margin-top: 8px; text-decoration: underline; }
.gz-unlock-viewlink:hover{ color: var(--gz-blue-dark); }
.gz-unlock-postswap{ margin-top: 10px; padding: 8px 10px; background: rgba(33,171,218,.10); border-left: 2px solid var(--gz-blue); }
.gz-unlock-postswap p{ margin: 0; font-size: 12px; line-height: 1.5; color: var(--gz-ink); }
.gz-remove-upgrade{ display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; padding: 0; border: none; background: transparent; color: var(--gz-muted); font-size: 14px; line-height: 1; cursor: pointer; border-radius: 50%; }
.gz-remove-upgrade:hover{ background: rgba(20,24,27,.08); color: var(--gz-ink); }
.gz-remove-upgrade:disabled{ opacity: .4; cursor: default; }

/* ===== Prepay & Save — pay 3/6/12 months upfront for a locked discount.
 * Its own blue-topped identity (the package-unlock moment above it is
 * amber-topped) so the two offers never visually blur into one thing when
 * both are stacked in the same plan panel. Renders identically on
 * /pricing/, the real cart, and checkout via gz_render_prepay_selector(). */
.gz-prepay-box{
  background: linear-gradient(165deg, rgba(33,171,218,.10), rgba(33,171,218,.03));
  border-top: 2px solid var(--gz-blue-dark); border-bottom: 1px solid var(--gz-line);
  padding: 16px 20px 18px; flex: none; transition: box-shadow .3s ease;
}
.gz-prepay-kicker{
  display: inline-block; font-family: "Outfit", sans-serif !important; font-size: 10px; font-weight: 600 !important;
  letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--gz-blue-dark);
  padding: 4px 10px; margin-bottom: 10px;
}
.gz-prepay-box h4{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 14px; line-height: 1.4; margin: 0 0 12px; color: var(--gz-ink); }
.gz-prepay-terms{ display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 6px; margin-bottom: 4px; }
.gz-prepay-term{
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  background: #fff; border: 1.5px solid var(--gz-line); border-radius: 2px; cursor: pointer;
  padding: 9px 6px; transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.gz-prepay-term:hover{ transform: translateY(-1px); border-color: var(--gz-blue); background: #fff; color: inherit; }
.gz-prepay-term .lbl{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 12px; color: var(--gz-ink); }
.gz-prepay-term .note{ font-size: 9.5px; line-height: 1.35; color: var(--gz-muted); }
.gz-prepay-term.is-active{ background-color: var(--gz-blue) !important; border-color: var(--gz-blue-dark) !important; }
.gz-prepay-term.is-active .lbl, .gz-prepay-term.is-active .note{ color: var(--gz-ink) !important; }
.gz-prepay-term.is-active:hover{ background-color: var(--gz-blue) !important; border-color: var(--gz-blue-dark) !important; transform: translateY(-1px); }
.gz-prepay-result{ font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; color: var(--gz-blue-dark); margin: 10px 0 0; min-height: 1.4em; }
.gz-prepay-result:empty{ margin: 0; min-height: 0; }

/* Same "unlocked"-style celebration language as Package Unlocked, its own
   blue pulse instead of confetti on the cart/checkout surfaces (the
   /pricing/ tool fires the real confetti burst here too via JS). */
.gz-prepay-celebrate{ animation: gz-prepay-pulse .9s ease; }
@keyframes gz-prepay-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(33,171,218,.45); }
  40%{ box-shadow: 0 0 0 8px rgba(33,171,218,0); }
  100%{ box-shadow: 0 0 0 0 rgba(33,171,218,0); }
}
@media (prefers-reduced-motion: reduce){ .gz-prepay-celebrate{ animation: none; } }

/* Standalone on the real cart/checkout pages, same pattern as .gz-cart-unlock. */
.gz-prepay-wrap{ max-width: 900px; margin: 0 auto 24px; }
.gz-prepay-wrap .gz-prepay-box{
  position: relative; isolation: isolate; border: none; padding: 24px 28px;
}
.gz-prepay-wrap .gz-prepay-box::before{
  content: ''; position: absolute; inset: 0; z-index: -1; background: inherit; clip-path: url(#gz-clip-lg);
}
.gz-prepay-wrap .gz-prepay-box > *{ position: relative; z-index: 1; }
.gz-prepay-wrap-checkout{ margin-bottom: 32px; }

@media (max-width: 560px){
  .gz-prepay-terms{ grid-template-columns: repeat(2, 1fr); }
}

/* ===== Exit-intent lead capture — a single considered offer, not a popup
 * ad: appears once per session, only after real engagement (min 8s on
 * page, plus either exit-intent or genuine scroll+dwell), same panel
 * language as the rest of the site. ===== */
.gz-lead-modal{
  position: fixed; inset: 0; z-index: 9990;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.gz-lead-modal-scrim{
  position: absolute; inset: 0; background: rgba(20,24,27,.55);
  opacity: 0; transition: opacity .25s ease;
}
.gz-lead-modal.is-in .gz-lead-modal-scrim{ opacity: 1; }
.gz-lead-modal-card{
  position: relative; isolation: isolate; background: #fff; max-width: 420px; width: 100%;
  padding: 32px 30px 26px; border: none;
  box-shadow: 0 30px 70px -20px rgba(20,24,27,.45);
  opacity: 0; transform: translateY(16px) scale(.98);
  transition: opacity .3s ease, transform .3s ease;
}
.gz-lead-modal-card::before{
  content: ''; position: absolute; inset: 0; z-index: -1; background: #fff; clip-path: url(#gz-clip-lg);
}
.gz-lead-modal.is-in .gz-lead-modal-card{ opacity: 1; transform: translateY(0) scale(1); }
.gz-lead-modal-close{
  position: absolute; top: 14px; right: 14px; background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--gz-muted); padding: 4px;
}
.gz-lead-modal-close:hover{ color: var(--gz-ink); background: none; }
.gz-lead-modal-kicker{
  display: block; font-family: "Outfit", sans-serif !important; font-size: 10.5px; font-weight: 600 !important;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gz-blue-dark); margin-bottom: 10px;
}
.gz-lead-modal-card h3{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: 21px; line-height: 1.3; margin: 0 0 8px; color: var(--gz-ink); text-wrap: balance; }
.gz-lead-modal-sub{ font-size: 13.5px; line-height: 1.6; color: var(--gz-muted); margin: 0 0 20px; }
#gz-lead-modal-form{ display: flex; flex-direction: column; gap: 10px; }
#gz-lead-modal-form input{
  border: 1.5px solid var(--gz-line); border-radius: 2px; padding: 11px 13px; font-size: 13.5px;
  font-family: inherit; background: #fff; color: var(--gz-ink); width: 100%;
}
#gz-lead-modal-form input:focus{ outline: none; border-color: var(--gz-blue); }
#gz-lead-modal-form .gz-btn{ margin-top: 4px; border: none; cursor: pointer; }
.gz-lead-modal-result{ font-size: 14px; font-weight: 700; color: var(--gz-blue-dark); text-align: center; padding: 12px 0; margin: 0; }
.gz-lead-modal-skip{
  display: block; width: 100%; text-align: center; background: none; border: none; cursor: pointer;
  font-size: 12px; color: var(--gz-muted); margin-top: 14px; text-decoration: underline; padding: 0;
}
.gz-lead-modal-skip:hover{ color: var(--gz-ink); background: none; }
@media (prefers-reduced-motion: reduce){
  .gz-lead-modal-scrim, .gz-lead-modal-card{ transition: none; }
}

/* Confetti — a handful of absolutely-positioned pieces spawned at the
   unlock badge, animated outward once, then removed. No canvas/library
   needed for a burst this small. */
.gz-confetti-piece{
  position: absolute; width: 7px; height: 11px; z-index: 9998; pointer-events: none;
  animation: gz-confetti-burst .9s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes gz-confetti-burst{
  0%{ transform: translate(0,0) rotate(0deg); opacity: 1; }
  100%{ transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .gz-confetti-piece{ display: none; }
}
.gz-plan-foot{ padding: 16px 20px 20px; border-top: 1px solid var(--gz-line); flex: none; }
.gz-plan-subtotal{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.gz-plan-subtotal .k{ font-size: 11.5px; color: var(--gz-muted); text-transform: uppercase; letter-spacing: .05em; }
.gz-plan-subtotal .v{ font-family: "JetBrains Mono", monospace; font-size: 18px; font-weight: 700; color: var(--gz-blue-dark); }
#gz-calc-add-cart{ border: none; cursor: pointer; }
#gz-calc-add-cart:disabled{ opacity: .45; cursor: not-allowed; }
.gz-plan-talk{ display: block; text-align: center; font-size: 12px; color: var(--gz-muted); margin-top: 10px; text-decoration: none; }
.gz-plan-talk:hover{ color: var(--gz-blue-dark); text-decoration: underline; }

.gz-plan-mobile-bar{
  display: none; position: sticky; bottom: 0; z-index: 40;
  background: var(--gz-ink); color: #F2F0EA;
  align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; font-size: 12.5px; grid-column: 1 / -1;
  box-shadow: 0 -10px 30px -14px rgba(20,24,27,.4);
}
.gz-plan-mobile-bar .n{ font-family: "JetBrains Mono", monospace; font-weight: 700; }
.gz-plan-mobile-bar button{
  background: var(--gz-blue); color: var(--gz-ink); border: none; font-weight: 700;
  font-size: 12px; padding: 9px 14px; cursor: pointer; flex: none;
}
.gz-plan-mobile-bar button:hover{ background: var(--gz-blue); color: var(--gz-ink); }

@media (max-width: 900px){
  .gz-calc-layout{ grid-template-columns: 1fr; }
  .gz-plan-panel{ position: static; max-height: none; margin-top: 8px; }
  .gz-plan-mobile-bar{ display: flex; }
}
@media (max-width: 640px){
  .gz-calc-tiers{ grid-template-columns: repeat(3, 1fr); }
}

/* ===== GZ-GUIDE / GZ-CHAT — the actual "tool" part: a real branching
 * conversation (what do you need -> contextual follow-up -> budget ->
 * relevant cross-sell) that lands on a reasoned starting plan, instead of
 * an empty grid with a running total. Rendered as a growing transcript —
 * answered turns collapse to a single line, the next question appends
 * below — so it reads as a conversation, not a form wizard. Sits above
 * the manual grid, which is demoted to a secondary "or build it
 * yourself" option. ===== */
.gz-guide-stage{ padding: 8px 24px 0; max-width: 760px; margin: 0 auto; }
.gz-guide{ padding: 40px 44px; }
.gz-guide-kicker{
  display: block; text-align: center; font-family: "Outfit", sans-serif !important; font-size: 10.5px; font-weight: 600 !important;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gz-amber-deep); margin-bottom: 12px;
}
.gz-guide h2{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(21px,2.8vw,28px); margin: 0 0 26px; text-wrap: balance; text-align: center; }

/* ===== The actual chat window — a fixed-height, self-scrolling transcript
 * with real bubbles (assistant left/light, visitor right/accent), not a
 * stack of plain paragraphs that grows the page forever. Caught live: with
 * no bubble styling at all, every turn just read as another paragraph of
 * body text, indistinguishable from the page around it — "there is no
 * chatbot, the conversation is building as a page." ===== */
.gz-chat{
  display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto;
  background: #fff; border: 1px solid var(--gz-line); border-radius: 3px;
  padding: 18px; margin-bottom: 14px; scroll-behavior: smooth;
}
.gz-chat-turn{
  display: flex; opacity: 0; transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease; margin: 6px 0;
}
.gz-chat-turn.is-in{ opacity: 1; transform: translateY(0); }
.gz-chat-turn-assistant{ justify-content: flex-start; }
.gz-chat-turn-user{ justify-content: flex-end; }
.gz-chat-bubble{
  max-width: 78%; padding: 10px 14px; font-size: 13.5px; line-height: 1.55;
  white-space: pre-wrap; word-wrap: break-word;
}
.gz-chat-turn-assistant .gz-chat-bubble{
  background: var(--gz-tint); color: var(--gz-ink);
  border-radius: 3px 12px 12px 12px;
}
.gz-chat-turn-user .gz-chat-bubble{
  background: var(--gz-blue); color: var(--gz-ink);
  border-radius: 12px 3px 12px 12px;
}
.gz-chat-thinking .gz-chat-bubble{
  color: var(--gz-muted); font-style: italic; animation: gz-chat-thinking-pulse 1.1s ease-in-out infinite;
}
@keyframes gz-chat-thinking-pulse{ 0%,100%{ opacity: .5; } 50%{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .gz-chat-thinking .gz-chat-bubble{ animation: none; } }
.gz-chat::-webkit-scrollbar{ width: 6px; }
.gz-chat::-webkit-scrollbar-thumb{ background: var(--gz-line); border-radius: 999px; }
@media (max-width: 640px){ .gz-chat{ max-height: 320px; } }

#gz-chat-ask-form{ display: flex; gap: 8px; }
#gz-chat-ask-input{
  flex: 1; border: 1.5px solid var(--gz-line); border-radius: 2px; padding: 10px 12px; font-size: 13.5px;
  font-family: inherit; background: #fff; color: var(--gz-ink);
}
#gz-chat-ask-input:focus{ outline: none; border-color: var(--gz-blue); }
#gz-chat-ask-form button{
  background: var(--gz-ink); color: #fff; border: none; border-radius: 2px; padding: 0 18px;
  font-size: 13px; font-weight: 700; cursor: pointer; flex: none;
}
#gz-chat-ask-form button:hover{ background: var(--gz-charcoal-2); color: #fff; }
#gz-chat-ask-answer{ margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--gz-ink); background: #fff; border: 1px solid var(--gz-line); padding: 12px 14px; }

@media (max-width: 640px){
  .gz-guide{ padding: 26px 22px; }
  #gz-chat-ask-form{ flex-direction: column; }
}

.gz-calc-manual-label{
  text-align: center; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gz-muted); margin-bottom: 20px;
}

/* ===================================================================
 * GZ-SPEC — individual service detail pages. Reads as a build spec
 * sheet: a blueprint-grid hero with a technical title-block frame, then
 * a dial that switches Foundation/Momentum/Command one at a time rather
 * than a torn-ledger's three rows or a card grid's three boxes. Ties
 * back to the site's own construction motifs (the intro's grid-line
 * sketch, the homepage's hand-drawn Verify mark) instead of a fourth,
 * unrelated metaphor.
 * =================================================================== */
.gz-spec-scope{ background: var(--gz-cream); }

.gz-spec-hero{
  position: relative; padding: 72px 24px 52px; text-align: center;
  background-color: #fff;
  background-image:
    repeating-linear-gradient(0deg, rgba(33,171,218,.16) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(33,171,218,.16) 0 1px, transparent 1px 28px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
}
.gz-spec-hero-frame{
  position: relative; isolation: isolate; max-width: 620px; margin: 0 auto; padding: 34px 32px;
  background: #fff; border: 1px solid var(--gz-line);
}
.gz-spec-hero-frame .cnr{ position: absolute; width: 18px; height: 18px; }
.gz-spec-hero-frame .cnr.tl{ top: -1px; left: -1px; border-top: 2px solid var(--gz-blue); border-left: 2px solid var(--gz-blue); }
.gz-spec-hero-frame .cnr.tr{ top: -1px; right: -1px; border-top: 2px solid var(--gz-blue); border-right: 2px solid var(--gz-blue); }
.gz-spec-hero-frame .cnr.bl{ bottom: -1px; left: -1px; border-bottom: 2px solid var(--gz-blue); border-left: 2px solid var(--gz-blue); }
.gz-spec-hero-frame .cnr.br{ bottom: -1px; right: -1px; border-bottom: 2px solid var(--gz-blue); border-right: 2px solid var(--gz-blue); }
.gz-spec-eyebrow{ display: inline-block; font-family: "Outfit", sans-serif !important; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gz-blue-dark); font-weight: 600 !important; padding: 4px 12px; border: 1px solid var(--gz-blue); border-radius: 20px; margin-bottom: 18px; }
.gz-spec-hero-frame h1{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(28px,4.4vw,44px); line-height: 1.08; margin: 0 0 10px; color: var(--gz-ink); text-wrap: balance; }
.gz-spec-hero-frame p{ font-size: 14.5px; color: var(--gz-muted); max-width: 46ch; margin: 0 auto; }
.gz-spec-from{ display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--gz-line); }
.gz-spec-from .k{ font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gz-muted); }
.gz-spec-from .v{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: 26px; color: var(--gz-blue-dark); }
.gz-spec-from .v small{ font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 500; color: var(--gz-muted); margin-left: 2px; }

.gz-spec-stage{ max-width: 720px; margin: 0 auto; padding: 44px 24px 40px; }
.gz-spec-stage:last-of-type{ padding-bottom: 8px; }
.gz-spec-track-label{ font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--gz-muted); margin: 0 0 14px 4px; }
.gz-spec-track-label strong{ color: var(--gz-ink); font-weight: 700; }
.gz-spec-panel{ background: #fff; border: 1px solid var(--gz-line); border-radius: 2px; overflow: hidden; }
.gz-spec-dial{ display: flex; }
.gz-spec-dial-btn{
  flex: 1; background: var(--gz-tint); border: none; border-right: 1px solid var(--gz-line); cursor: pointer;
  padding: 16px 8px; font-family: "JetBrains Mono", monospace; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gz-muted); transition: background .15s ease, color .15s ease;
}
.gz-spec-dial-btn:last-child{ border-right: none; }
.gz-spec-dial-btn.is-active{ background: #fff; color: var(--gz-blue-dark); box-shadow: inset 0 -2px 0 var(--gz-blue); }
.gz-spec-dial-btn:hover{ background: var(--gz-tint); color: var(--gz-blue-dark); }
.gz-spec-dial-btn.is-active:hover{ background: #fff; }
.gz-spec-detail{ display: none; padding: 28px 28px 26px; }
.gz-spec-detail.is-active{ display: block; }
/* Service/Product Business toggle (5 services with a real dual-priced
   standalone tier) -- both variants render server-side, CSS just shows
   the one matching the toggle's current state, same technique as any
   other client-side-only view switch on this site.
   gz_seam_connector('down') pulls itself up via negative margin-bottom
   (-50px desktop / -32px mobile, see .gz-seam-down) so its device icon
   visually straddles the boundary with whatever comes next -- confirmed
   live this toggle, being the very first thing after the seam on this
   page, landed right in that pulled-up zone and collided with the icon.
   Every other seam-adjacent section on the site already carries enough of
   its own top padding to clear this; this toggle didn't, so it needs
   real margin-top instead of relying on next-element spacing. */
.gz-spec-biz-toggle-wrap{ display: flex; justify-content: center; margin: 60px 0 -8px; padding: 0 24px; }
@media (max-width: 782px){
  .gz-spec-biz-toggle-wrap{ margin-top: 40px; }
}
.gz-spec-biz-view[data-biz="product"]{ display: none; }
.gz-spec-scope.biz-product .gz-spec-biz-view[data-biz="service"]{ display: none; }
.gz-spec-scope.biz-product .gz-spec-biz-view[data-biz="product"]{ display: block; }
/* Quick Launch's Marketing section reuses the same dual-view technique
   (Launch SEO/Ads/Social/Combo now have real Product-Business pricing). */
.gz-ql-scope.biz-product .gz-spec-biz-view[data-biz="service"]{ display: none; }
.gz-ql-scope.biz-product .gz-spec-biz-view[data-biz="product"]{ display: block; }
.gz-svc-scope.biz-product .gz-spec-biz-view[data-biz="service"]{ display: none; }
.gz-svc-scope.biz-product .gz-spec-biz-view[data-biz="product"]{ display: block; }
.gz-tiercard-toggle-price .gz-spec-biz-view{ display: inline; }
.gz-tiercard-toggle-price .gz-spec-biz-view[data-biz="product"]{ display: none; }
.gz-svc-scope.biz-product .gz-tiercard-toggle-price .gz-spec-biz-view[data-biz="service"]{ display: none; }
.gz-svc-scope.biz-product .gz-tiercard-toggle-price .gz-spec-biz-view[data-biz="product"]{ display: inline; }
.gz-ql-scope .gz-spec-biz-toggle-wrap{ margin: 0 0 20px; }
.gz-spec-detail-price{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: 30px; color: var(--gz-ink); margin-bottom: 18px; }
.gz-spec-detail-price small{ font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500; color: var(--gz-muted); margin-left: 3px; }
.gz-spec-lines{ list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.gz-spec-lines li{ position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.5; color: var(--gz-ink); }
.gz-spec-lines li::before{ content: ''; position: absolute; left: 0; top: 8px; width: 12px; height: 1.5px; background: var(--gz-blue); }
.gz-spec-lines li::after{ content: ''; position: absolute; left: 0; top: 5px; width: 5px; height: 5px; border-radius: 50%; border: 1.5px solid var(--gz-blue); background: #fff; }
@media (max-width: 640px){
  .gz-spec-dial-btn{ font-size: 10px; padding: 13px 4px; }
  .gz-spec-detail{ padding: 22px 20px 20px; }
}

.gz-spec-proof-stage{ max-width: 720px; margin: 0 auto; padding: 52px 24px 56px; text-align: center; }
.gz-spec-proof{
  position: relative; isolation: isolate; background: var(--gz-amber);
  padding: 26px 30px; max-width: 460px; margin: 0 auto; display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; justify-content: center;
}
.gz-spec-proof::before{ content: ''; position: absolute; inset: 0; z-index: -1; background: inherit; clip-path: url(#gz-clip-btn); }
.gz-spec-proof .gz-verify{ flex-basis: 100%; text-align: center; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.gz-spec-proof-num{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: 32px; color: var(--gz-ink); flex: none; }
.gz-spec-proof-text{ font-size: 13px; color: var(--gz-ink); flex: 1 1 200px; line-height: 1.4; text-align: left; }
.gz-spec-proof a{ flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--gz-ink); text-decoration: underline; }

.gz-spec-faq-stage{ max-width: 680px; margin: 0 auto; padding: 0 24px 56px; }
.gz-spec-faq-stage h2{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 22px; margin: 0 0 20px; text-align: center; }
.gz-spec-faq{ display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px dashed var(--gz-line); }
.gz-spec-faq .idx{ font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; color: var(--gz-blue); flex: none; padding-top: 1px; }
.gz-spec-faq .q{ display: block; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; color: var(--gz-blue-dark); margin-bottom: 4px; }
.gz-spec-faq .a{ display: block; font-size: 13.5px; color: var(--gz-ink); line-height: 1.55; }

.gz-spec-next{ max-width: 720px; margin: 0 auto; padding: 0 24px 72px; text-align: center; }
.gz-spec-next p{ font-size: 13.5px; color: var(--gz-muted); }
.gz-spec-next a{ color: var(--gz-blue-dark); font-weight: 700; text-decoration: none; }
.gz-spec-next a:hover{ text-decoration: underline; }

/* ===================================================================
 * GZ-PKGD — Package Detail (Service/Product Business). Third distinct
 * idea: one tier "open" at a time behind large tab switches, read as a
 * full dossier record (all 5 categories, full width), not a card grid
 * and not the service-detail ledger. Tabs are real interaction, not
 * decoration — Momentum starts open since it's the one most people pick.
 * =================================================================== */
.gz-pkgd-scope{ background: var(--gz-cream); }
/* "service product business package page have some issue with
   heading/hero" -- confirmed live: max-width:780px was set directly on
   this OUTER section, the same element .gz-page-hero-stage tries to
   make full-bleed (width:100vw). max-width always constrains width
   regardless of which rule/order set which -- they're different
   properties, not a specificity fight -- so the section rendered
   capped at 780px with the cream page background showing on both
   sides instead of the full-width dark stage. Moved the width
   constraint onto the actual inner content wrapper (.gz-pkgd-hero-inner),
   same pattern every other working page-hero-stage already uses
   (.gz-about2-hero, .gz-contact-intro: no max-width on the outer
   section at all, only on their own -inner wrapper). */
.gz-pkgd-hero{ padding: 76px 24px 20px; text-align: center; }
.gz-pkgd-hero-inner{ max-width: 780px; margin: 0 auto; }
.gz-pkgd-kicker{ font-family: "Outfit", sans-serif !important; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gz-amber-deep); font-weight: 600 !important; }
.gz-pkgd-hero h1{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(28px,4.2vw,44px); margin: 14px 0 16px; color: var(--gz-ink); text-wrap: balance; }
.gz-pkgd-hero p{ font-size: 15px; color: var(--gz-muted); line-height: 1.6; max-width: 60ch; margin: 0 auto 18px; }
.gz-pkgd-switch{ font-size: 12.5px; font-weight: 700; color: var(--gz-blue-dark); text-decoration: none; }
.gz-pkgd-switch:hover{ text-decoration: underline; }

.gz-pkgd-dossier{ max-width: 940px; margin: 0 auto; padding: 64px 24px 40px; }
.gz-pkgd-tabs{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 4px; }
.gz-pkgd-tab{
  cursor: pointer; border: 1.5px solid var(--gz-line); background: #fff; border-radius: 2px;
  padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  transition: border-color .15s ease, background .15s ease;
}
.gz-pkgd-tab .lbl{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 13.5px; color: var(--gz-ink); }
.gz-pkgd-tab .prc{ font-family: "JetBrains Mono", monospace; font-size: 15px; font-weight: 700; color: var(--gz-muted); }
.gz-pkgd-tab .prc small{ font-size: 10px; font-weight: 500; }
.gz-pkgd-tab.is-active{ border-color: var(--gz-blue); background: rgba(33,171,218,.08); }
.gz-pkgd-tab.is-active .prc{ color: var(--gz-blue-dark); }
.gz-pkgd-tab:hover{ border-color: var(--gz-blue); background: #fff; }
.gz-pkgd-tab.is-active:hover{ background: rgba(33,171,218,.08); }

.gz-pkgd-record{ display: none; padding-top: 28px; }
.gz-pkgd-record.is-active{ display: block; }
.gz-pkgd-record-head{ display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; border-bottom: 2px solid var(--gz-ink); padding-bottom: 10px; }
.gz-pkgd-record-head h2{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: 24px; margin: 0; }
.gz-pkgd-record-head .note{ font-size: 12.5px; color: var(--gz-muted); }
/* A CSS-grid auto-fit row leaves a leftover last-row item pinned to the
   left edge instead of centered whenever the category count doesn't
   divide evenly into a full row (9 categories in 4 columns = an orphaned
   9th block on its own row, ~690px of dead white space beside it,
   confirmed via live layout geometry). Flex + wrap + justify-content:
   center is the standard fix — every row, complete or not, centers
   itself instead of hugging the left edge. */
.gz-pkgd-record-cats{ display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 28px; margin-bottom: 24px; }
.gz-pkgd-cat{ flex: 0 1 260px; }
.gz-pkgd-cat h3{ font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gz-blue-dark); font-weight: 700; margin: 0 0 10px; }
.gz-pkgd-cat ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gz-pkgd-cat li{ font-size: 13px; line-height: 1.5; color: var(--gz-ink); padding-left: 14px; position: relative; }
.gz-pkgd-cat li::before{ content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--gz-blue); }
/* Was inline-flex with no centering of its own, sitting flush left in
   its full-width block-level parent -- while .gz-pkgd-terms right below
   it centers itself via margin:auto, so the two read as visually
   unrelated instead of one aligned unit. Confirmed live via screenshot.
   width:fit-content + margin:auto centers the button the same way. */
.gz-pkgd-buy{
  display: flex; width: fit-content; align-items: center; gap: 8px; margin: 0 auto; background: var(--gz-blue); color: var(--gz-ink);
  font-family: "Outfit", sans-serif; font-weight: 700; font-size: 14px; padding: 13px 24px; border-radius: 2px; text-decoration: none;
}
.gz-pkgd-buy:hover{ transform: translateY(-2px); }
.gz-pkgd-terms{ text-align: center; font-size: 12px; line-height: 1.6; color: var(--gz-muted); max-width: 56ch; margin: 28px auto 0; padding: 10px 16px; background: rgba(20,24,27,.04); border-left: 2px solid var(--gz-line); }
.gz-pkgd-region{ text-align: center; font-size: 12px; color: var(--gz-muted); margin-top: 14px; }
.gz-pkgd-region a{ color: var(--gz-blue-dark); font-weight: 700; }
@media (max-width: 700px){ .gz-pkgd-tabs{ grid-template-columns: 1fr; } .gz-pkgd-dossier{ padding-top: 44px; } }

.gz-pkgd-proof-stage{ max-width: 780px; margin: 0 auto; padding: 0 24px 72px; }
.gz-pkgd-proof{ position: relative; isolation: isolate; background: var(--gz-charcoal); padding: 28px 32px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.gz-pkgd-proof::before{ content: ''; position: absolute; inset: 0; z-index: -1; background: inherit; clip-path: url(#gz-clip-lg); }
.gz-pkgd-proof .num{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: 30px; color: var(--gz-blue-light); flex: none; }

/* ===================================================================
 * GZ-WWD2 — not a standard page. Standard site chrome is hidden here
 * (body:has below); real work fills the screen the instant the page
 * loads (a full-bleed masonry, not a stat block first), and each case
 * study is a full-viewport cinematic chapter you scroll through instead
 * of a dossier row you click open. One deliberate way out, pinned the
 * whole time, since leaving is the one nav action that still exists.
 * =================================================================== */
body:has(.gz-wwd2-scope) .site-header,
body:has(.gz-wwd2-scope) .site-footer{ display: none; }
.gz-wwd2-scope{ background: var(--gz-void); color: #F2F0EA; }

.gz-wwd2-exit{
  position: fixed; top: 18px; left: 18px; z-index: 500;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: #F2F0EA; background: rgba(20,24,27,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(246,240,227,.2); text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.gz-wwd2-exit:hover{ background: rgba(33,171,218,.3); border-color: var(--gz-blue); }

/* "How We Did It page doesn't have effect behind portfolio" -- this
   section mounts a canvas the same way .gz-wwd2-chapter/.gz-cta-stage do
   (see wp_footer selector list), but was missing position:relative, so the
   canvas's position:absolute had no positioned ancestor to anchor to and
   rendered nowhere near this section. Same fix already applied to
   .gz-wwd2-chapter/.gz-wwd2-close/.gz-page-hero-stage for the same reason. */
.gz-wwd2-entrance{ padding: 66px 0 0; position: relative; overflow: hidden; z-index: 0; }
.gz-wwd2-entrance > *:not(canvas){ position: relative; z-index: 1; }
.gz-wwd2-entrance-bar{
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px;
  padding: 0 28px 20px; max-width: 1700px; margin: 0 auto;
}
.gz-wwd2-entrance-title .k{ font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gz-blue-light); font-weight: 700; }
.gz-wwd2-entrance-title h1{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(24px,3.4vw,38px); margin: 8px 0 0; color: #F2F0EA; text-wrap: balance; }
.gz-wwd2-jump-cases{
  display: inline-block; margin-top: 12px; font-family: "JetBrains Mono", monospace; font-size: 11.5px; font-weight: 700;
  color: var(--gz-blue-light); text-decoration: underline; text-underline-offset: 3px;
}
.gz-wwd2-jump-cases:hover{ color: #F2F0EA; }
.gz-wwd2-tabs{ display: flex; gap: 8px; flex-wrap: wrap; }
.gz-wwd2-tabbtn{
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: rgba(246,240,227,.06); border: 1px solid rgba(246,240,227,.16); border-radius: 999px; padding: 8px 15px; cursor: pointer;
  color: var(--gz-mist); transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gz-wwd2-tabbtn em{ font-style: normal; opacity: .65; margin-left: 4px; }
.gz-wwd2-tabbtn.is-active{ background: var(--gz-blue); color: var(--gz-ink); border-color: var(--gz-blue); }
.gz-wwd2-tabbtn:hover{ border-color: var(--gz-blue-light); color: #F2F0EA; background: rgba(246,240,227,.06); }
.gz-wwd2-tabbtn.is-active:hover{ background: var(--gz-blue); color: var(--gz-ink); }
.gz-wwd2-tabbtn.is-active:hover{ color: var(--gz-ink); }

/* Every real piece of work, visible above the fold, nothing else
   competing with it for the first screen. Gaps widened from the
   original 3px to 10px -- this grid sits inside the same WebGL-canvas
   section as the header now, and at 3px the ambient scene behind it was
   fully obscured by the opaque tiles ("nothing behind the portfolio").
   10px is still a tight, dense grid but lets the scene actually show
   through between tiles. */
.gz-wwd2-masonry{ position: relative; z-index: 1; column-count: 5; column-gap: 10px; padding: 0 10px 10px; max-width: 1900px; margin: 0 auto; }
.gz-wwd2-frame{
  position: relative; display: block; width: 100%; margin-bottom: 10px; break-inside: avoid;
  border: none; padding: 0; cursor: pointer; overflow: hidden; background: #14181B;
}
.gz-wwd2-frame img{ transition: transform .3s ease; }
.gz-wwd2-frame:hover img{ transform: scale(1.03); }
.gz-wwd2-frame-cap{
  position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
  color: #F2F0EA; font-family: "JetBrains Mono", monospace; font-size: 10.5px; text-align: left;
  opacity: 0; transition: opacity .2s ease;
}
.gz-wwd2-frame:hover .gz-wwd2-frame-cap{ opacity: 1; }
.gz-wwd2-frame-empty{ display: flex; align-items: center; justify-content: center; min-height: 140px; font-size: 11px; color: #666F74; font-family: "JetBrains Mono", monospace; }
.gz-wwd2-frame-placeholder{ border: 1px dashed rgba(246,240,227,.18); cursor: default; }
@media (max-width: 1400px){ .gz-wwd2-masonry{ column-count: 4; } }
@media (max-width: 1000px){ .gz-wwd2-masonry{ column-count: 3; } }
@media (max-width: 700px){ .gz-wwd2-masonry{ column-count: 2; } .gz-wwd2-entrance-bar{ padding: 0 16px 16px; } }

/* Case studies as full-viewport cinematic chapters — scrolled through,
   not clicked open. Three tones cycling for rhythm, a giant faint
   watermark number instead of a small mono label. */
.gz-wwd2-chapter{ position: relative; isolation: isolate; overflow: hidden; min-height: 86vh; display: flex; align-items: center; padding: 64px 28px; }
/* "How We Did It page doesn't have page wide effect as agreed" -- these
   three tones (three different near-blacks, none of them --gz-void)
   were flat CSS panels with no starfield at all; only the very top and
   very bottom of the page had the real Signal Field. Unified to the
   one dark tone used everywhere else, canvas mounted below (see
   wp_footer selector list). */
.gz-wwd2-chapter.dark, .gz-wwd2-chapter.blue, .gz-wwd2-chapter.amber{ background: var(--gz-void); position: relative; overflow: hidden; z-index: 0; }
.gz-wwd2-chapter > *:not(canvas){ position: relative; z-index: 1; }
.gz-wwd2-chapter-watermark{
  position: absolute; top: -0.12em; right: 3%; z-index: 0;
  font-family: "Outfit", sans-serif; font-weight: 800; font-size: min(42vw, 480px); line-height: 1;
  color: rgba(246,240,227,.045); pointer-events: none; user-select: none;
}
.gz-wwd2-chapter-inner{ position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.gz-wwd2-chapter-tag{
  display: inline-flex; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  color: var(--gz-blue-light); background: rgba(79,195,232,.14); padding: 5px 13px; border-radius: 999px; margin-bottom: 20px;
}
.gz-wwd2-chapter.amber .gz-wwd2-chapter-tag{ color: var(--gz-amber-light); background: rgba(232,180,79,.14); }
.gz-wwd2-chapter-inner h2{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(28px,4.4vw,46px); line-height: 1.08; margin: 0 0 22px; color: #F2F0EA; text-wrap: balance; }
.gz-wwd2-chapter-problem, .gz-wwd2-chapter-did{ font-size: 15px; line-height: 1.65; color: var(--gz-mist); margin: 0 0 12px; max-width: 62ch; }
.gz-wwd2-chapter-did{ margin-bottom: 30px; }
.gz-wwd2-chapter-stats{ display: flex; flex-wrap: wrap; gap: 28px 40px; }
.gz-wwd2-chapter-stats div{ display: flex; flex-direction: column; }
.gz-wwd2-chapter-stats b{ font-family: "Outfit", sans-serif; font-size: 34px; font-weight: 800; color: var(--gz-blue-light); line-height: 1; }
.gz-wwd2-chapter.amber .gz-wwd2-chapter-stats b{ color: var(--gz-amber-light); }
.gz-wwd2-chapter-stats small{ font-size: 11px; color: var(--gz-mist); max-width: 20ch; margin-top: 6px; display: block; }
@media (max-width: 640px){ .gz-wwd2-chapter{ min-height: auto; padding: 56px 20px; } .gz-wwd2-chapter-watermark{ font-size: 34vw; top: -.05em; } }

/* ===================================================================
 * GZ-404 — a rejection stamp on a torn page, deliberately quiet.
 * =================================================================== */
.gz-404-scope{ background: var(--gz-cream); min-height: 60vh; }
.gz-404-stage{ max-width: 640px; margin: 0 auto; padding: 100px 24px 120px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
@media (max-width: 640px){ .gz-404-stage{ padding: 56px 20px 64px; } }
.gz-404-stamp{
  font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 64px; letter-spacing: .04em;
  color: var(--gz-amber-deep); border: 4px solid var(--gz-amber-deep); border-radius: 2px;
  padding: 10px 28px; opacity: .85;
}
.gz-404-copy h1{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(24px,3.4vw,34px); margin: 0 0 12px; color: var(--gz-ink); }
.gz-404-copy p{ font-size: 14.5px; color: var(--gz-muted); margin: 0 0 24px; }
.gz-404-links{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; max-width: 380px; margin: 0 auto; }
.gz-404-links a{ font-size: 14px; font-weight: 600; color: var(--gz-blue-dark); text-decoration: none; display: block; padding: 10px 4px; border-bottom: 1px dashed var(--gz-line); }

/* ===================================================================
 * GZ-WC — Shop / Cart / Checkout / My Account hero. A torn ticket-stub
 * tag instead of a dark banner — the transactional pages are literally
 * about a purchase moving through steps, so the motif is a real ticket,
 * not a repeat of any hero already used elsewhere on the site. The
 * WooCommerce content below (forms, order review, payment) is untouched
 * markup/logic — this only replaces the banner above it.
 * =================================================================== */
/* ===== Shop archive product grid — was 100% stock Kadence card styling
 * (default slate-gray price, no design tokens at all) under a custom hero
 * that made the page look finished at a glance but wasn't. Pure CSS
 * against WooCommerce's own stable loop markup, no template override. ===== */
/* Sort dropdown + result count — the last two stock WooCommerce controls
   on this page that had zero design-token styling, sitting directly above
   an otherwise fully redesigned grid. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  max-width: 1180px; margin: 0 auto !important; padding: 0 24px;
}
.woocommerce .woocommerce-result-count{
  font-size: 12.5px; color: var(--gz-muted); font-family: "JetBrains Mono", monospace;
}
.woocommerce .woocommerce-ordering select{
  font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; color: var(--gz-ink);
  background: #fff; border: 1.5px solid var(--gz-line); border-radius: 2px; padding: 8px 30px 8px 12px;
}
.woocommerce .woocommerce-ordering select:focus{ outline: none; border-color: var(--gz-blue); }
.woocommerce ul.products{
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 20px !important; margin: 0 0 40px !important; padding: 0 24px; max-width: 1180px; margin-left: auto !important; margin-right: auto !important;
}
.woocommerce ul.products li.product{
  background: #fff; border: none; clip-path: url(#gz-clip-btn);
  padding: 0; box-shadow: 0 1px 3px rgba(20,24,27,.04);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  display: flex; flex-direction: column;
}
.woocommerce ul.products li.product:hover{
  transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(20,24,27,.22);
}
.woocommerce ul.products li.product img{ display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--gz-tint); }
.woocommerce ul.products li.product .product-details{ padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family: "Outfit", sans-serif; font-weight: 700; font-size: 15px; line-height: 1.35; margin: 0 0 6px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link-title{ color: var(--gz-ink) !important; text-decoration: none; }
.woocommerce ul.products li.product .price{
  font-family: "JetBrains Mono", monospace; font-size: 15px; font-weight: 700; color: var(--gz-blue-dark) !important; margin-bottom: 10px; display: block;
}
.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price bdi,
.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol{ color: inherit !important; }
.woocommerce ul.products li.product .product-excerpt{ flex: 1; margin-bottom: 14px; }
.woocommerce ul.products li.product .product-excerpt p{ font-size: 12px; line-height: 1.55; color: var(--gz-muted); margin: 0 0 6px; }
.woocommerce ul.products li.product .product-action-wrap{ margin-top: auto; }
/* Same blue-by-default treatment as the product page's own Buy Now button
   (body.single-product .single_add_to_cart_button) — was dark/near-black
   by default here and only turned blue on hover, so the identical action
   (buy this) read as two different buttons depending on which page you
   were on. */
.woocommerce ul.products li.product a.button.add_to_cart_button{
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  background: var(--gz-blue) !important; color: var(--gz-ink) !important; border: none; border-radius: 2px;
  padding: 11px 14px; font-size: 12.5px; font-weight: 700; text-align: center; text-decoration: none;
}
.woocommerce ul.products li.product a.button.add_to_cart_button:hover{
  background: var(--gz-blue-light) !important; color: var(--gz-ink) !important;
}
.woocommerce ul.products li.product a.button.add_to_cart_button.added_to_cart{
  background: var(--gz-blue-dark) !important; color: #fff !important;
}
.woocommerce ul.products li.product a.button.add_to_cart_button.added_to_cart:hover{
  background: var(--gz-blue-dark) !important; color: #fff !important;
}
@media (max-width: 480px){
  .woocommerce ul.products{ grid-template-columns: 1fr !important; padding: 0 16px; }
}

/* ===== Order received (thank-you page) — the one page every paying
 * customer is guaranteed to see, previously carved out of the checkout
 * hero case entirely and left 100% default: stock success banner, stock
 * table, no design tokens anywhere. Pure CSS against WooCommerce's own
 * stable order-received markup. ===== */
.woocommerce-order{ max-width: 720px; margin: 0 auto; padding: 0 24px 60px; }
.woocommerce-order .woocommerce-notice--success.woocommerce-thankyou-order-received{
  background: var(--gz-tint) !important; border: none !important; border-left: 3px solid var(--gz-blue-dark) !important;
  border-radius: 2px; color: var(--gz-ink) !important; font-size: 14.5px; line-height: 1.6;
  padding: 16px 20px !important; margin: 0 0 28px !important;
}
.woocommerce-order-overview{
  position: relative; isolation: isolate;
  display: flex !important; flex-wrap: wrap; gap: 0; list-style: none !important; margin: 0 0 32px !important; padding: 0 !important;
  border: none; background: #fff;
}
.woocommerce-order-overview::before{
  content: ''; position: absolute; inset: 0; z-index: -1; background: #fff; clip-path: url(#gz-clip-btn);
}
.woocommerce-order-overview li{
  flex: 1 1 33%; padding: 14px 18px !important; border-right: 1px solid var(--gz-line);
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--gz-muted); font-weight: 700;
}
.woocommerce-order-overview li:last-child{ border-right: none; }
.woocommerce-order-overview li strong{
  display: block; font-family: "JetBrains Mono", monospace; font-size: 15px; text-transform: none;
  letter-spacing: 0; color: var(--gz-ink); margin-top: 4px; font-weight: 700;
}
.woocommerce-order-details__title,
.woocommerce-column__title{
  font-family: "Outfit", sans-serif; font-weight: 800; font-size: 17px; color: var(--gz-ink); margin: 0 0 14px;
}
.woocommerce-table--order-details{ width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 32px; }
.woocommerce-table--order-details thead th{
  text-align: left; padding: 11px 14px; background: var(--gz-charcoal); color: #F2F0EA;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.woocommerce-table--order-details td{ padding: 12px 14px; border-bottom: 1px solid var(--gz-line); color: var(--gz-muted); }
.woocommerce-table--order-details td a{ color: var(--gz-ink); font-weight: 600; text-decoration: none; }
.woocommerce-table--order-details tfoot th, .woocommerce-table--order-details tfoot td{
  padding: 11px 14px; border-bottom: 1px solid var(--gz-line); font-weight: 700; color: var(--gz-ink);
}
.woocommerce-table--order-details tfoot tr:last-child th, .woocommerce-table--order-details tfoot tr:last-child td{
  border-bottom: none; font-size: 15px; color: var(--gz-blue-dark);
}
.woocommerce-customer-details{ border-top: 1px dashed var(--gz-line); padding-top: 24px; }
.woocommerce-customer-details address{ font-style: normal; font-size: 13.5px; line-height: 1.7; color: var(--gz-muted); }

/* Kadence's own #primary carries a default 80px top margin; every custom
   full-page template on this site bypasses Kadence's normal content
   wrapper entirely so it never applies, but the WooCommerce template
   overrides (My Account, Cart, Checkout, Order Received) still go
   through that normal #primary chain -- leaving an 80px band of
   whatever's behind #primary (not this section's own cream, that's
   overridden by .gz-page-hero-stage's !important dark background
   anyway) showing between the header and this hero. Confirmed live via
   screenshot. Cancelling it here pulls the hero flush against the
   header, matching every other page on the site. */
.gz-wc-hero{ background: var(--gz-cream); padding: 72px 24px 8px; margin-top: -144px; }
.gz-wc-hero-inner{ max-width: 640px; margin: 0 auto; }
.gz-wc-stub{
  display: inline-flex; align-items: center; font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gz-ink); background: #fff;
  padding: 6px 14px; border: 1px dashed var(--gz-blue); border-radius: 999px; margin-bottom: 16px;
}
.gz-wc-hero-inner h1{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(26px,3.8vw,38px); margin: 0 0 10px; color: var(--gz-ink); }
.gz-wc-hero-inner p{ font-size: 14px; color: var(--gz-muted); max-width: 56ch; margin: 0; }
.gz-404-links a:hover{ color: var(--gz-ink); }

.gz-wwd2-lightbox{ position: fixed; inset: 0; background: rgba(12,17,19,.95); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.gz-wwd2-lightbox[hidden]{ display: none; }
.gz-wwd2-lightbox button{ background: rgba(255,255,255,.08); border: none; color: #F2F0EA; cursor: pointer; }
.gz-wwd2-lightbox button:hover{ background: rgba(255,255,255,.18); color: #F2F0EA; }
#gz-lightbox-close{ position: absolute; top: 20px; right: 24px; background: none; font-size: 30px; line-height: 1; }
#gz-lightbox-prev, #gz-lightbox-next{ position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; font-size: 22px; }
#gz-lightbox-prev{ left: 16px; } #gz-lightbox-next{ right: 16px; }
.gz-wwd2-lightbox figure{ max-width: 88vw; max-height: 88vh; margin: 0; text-align: center; }
#gz-lightbox-imgwrap{ max-width: 88vw; max-height: 76vh; overflow: auto; cursor: zoom-in; }
#gz-lightbox-img{ display: block; max-width: 88vw; max-height: 76vh; transition: transform .2s ease; }
#gz-lightbox-caption{ color: var(--gz-mist); font-size: 12.5px; margin-top: 14px; }

.gz-wwd2-close{
  /* Top padding matches .gz-cta-stage's own fix: a preceding up-seam's
     satellite overlaps 64px into this section's top edge, and 64px flat
     left the "close" heading right up against it. */
  text-align: center; padding: 96px 24px 90px; background: var(--gz-void);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  position: relative; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
/* "random blank footer/CTA patch" -- same confirmed bug as
   .gz-page-hero-stage earlier: without excluding canvas, this rule beat
   the canvas's own position:absolute (same specificity, later in the
   stylesheet), turning it into a normal-flow block sized to its actual
   rendered pixel height and inflating this whole section into a huge
   blank gap above the real links. */
.gz-wwd2-close > *:not(canvas){ position: relative; z-index: 1; }
.gz-wwd2-close-main{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 20px; color: #F2F0EA; text-decoration: none; }
.gz-wwd2-close-main:hover{ color: var(--gz-blue-light); }
.gz-wwd2-close-sub{ font-size: 13px; color: var(--gz-mist); text-decoration: underline; text-underline-offset: 3px; }
.gz-wwd2-close-sub:hover{ color: #F2F0EA; }
.gz-pkgd-proof p{ font-size: 13px; color: var(--gz-mist); line-height: 1.5; margin: 0; flex: 1 1 260px; }

/* ===== Kadence defaults never themed to our palette — global floating
 * scroll-to-top button was raw Kadence customizer blue (#26c0f1) on
 * every single page. Pull it into our system instead. ===== */
#kt-scroll-up-reader, #kt-scroll-up{
  color: var(--gz-ink) !important;
  border-color: var(--gz-ink) !important;
  background: var(--gz-cream) !important;
}
/* Kadence's own mobile-drawer controls (sub-menu expand toggle, close
   button, dropdown special-page toggle) — never restyled by this theme,
   so they still fall through to Kadence's raw button:hover navy. Neutral
   hover instead of introducing a fifth ad-hoc color for controls that
   are mostly invisible chrome. */
.dropdown-nav-special-toggle:hover, .menu-toggle-close:hover, .drawer-sub-toggle:hover{
  background: transparent !important; color: inherit !important;
}
#kt-scroll-up-reader:hover, #kt-scroll-up:hover{
  color: var(--gz-amber-deep) !important;
  border-color: var(--gz-amber-deep) !important;
}

/* ===================================================================
 * GZ-POST — blog reading templates (single.php, archive.php). Was
 * 100% stock Kadence output before this pass: default breadcrumb,
 * default entry-header, default comment form, raw palette-blue links.
 * "Field report" concept: a stamped cover instead of another hero.
 * =================================================================== */
.gz-post-scope{ background: var(--gz-cream); }
.gz-post-head-stage{ padding: 56px 24px 8px; max-width: 780px; margin: 0 auto; }
.gz-post-head{ position: relative; padding: 8px 4px 28px; border-bottom: 2px solid var(--gz-ink); }
.gz-post-tag{
  display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gz-amber-deep);
  border: 1.5px solid var(--gz-amber-deep); padding: 5px 11px; margin-bottom: 16px; text-decoration: none;
}
.gz-post-tag:hover{ background: var(--gz-amber-deep); color: var(--gz-cream); }
.gz-post-head h1{
  font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(28px,4.4vw,46px);
  line-height: 1.08; letter-spacing: -.015em; color: var(--gz-ink); margin: 0 0 18px; text-wrap: balance;
}
.gz-post-meta{ font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: .04em; color: var(--gz-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.gz-post-meta-dot{ opacity: .5; }

.gz-post-media-stage{ padding: 36px 24px; max-width: 900px; margin: 0 auto; }
.gz-post-media img{
  display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover;
  clip-path: url(#gz-clip-lg); filter: drop-shadow(0 18px 30px rgba(20,24,27,.22));
}

.gz-post-body-stage{ padding: 8px 24px 20px; max-width: 780px; margin: 0 auto; }
.gz-post-body{
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16.5px; line-height: 1.72; color: var(--gz-ink);
}
.gz-post-body > *:first-child{ margin-top: 0; }
.gz-post-body p{ margin: 0 0 22px; }
.gz-post-body h2{
  font-family: "Outfit", sans-serif; font-weight: 700; font-size: 25px; letter-spacing: -.01em;
  color: var(--gz-ink); margin: 44px 0 16px; padding-left: 16px; border-left: 4px solid var(--gz-amber-deep);
}
.gz-post-body h3{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 19px; color: var(--gz-ink); margin: 32px 0 12px; }
.gz-post-body ul, .gz-post-body ol{ margin: 0 0 22px; padding-left: 4px; list-style: none; }
.gz-post-body ul li, .gz-post-body ol li{ position: relative; padding-left: 22px; margin-bottom: 9px; }
.gz-post-body ul li::before{ content: '\2022'; position: absolute; left: 0; color: var(--gz-amber-deep); font-weight: 700; }
.gz-post-body ol{ counter-reset: gzpost; }
.gz-post-body ol li::before{ counter-increment: gzpost; content: counter(gzpost) '.'; position: absolute; left: 0; color: var(--gz-amber-deep); font-weight: 700; font-family: "JetBrains Mono", monospace; font-size: 13px; }
.gz-post-body blockquote{
  margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--gz-blue); font-style: italic;
  font-family: "Outfit", sans-serif; font-size: 19px; color: var(--gz-blue-dark); line-height: 1.5;
}
.gz-post-body a{ color: var(--gz-blue-dark); text-decoration: underline; text-decoration-color: rgba(11,78,104,.35); text-underline-offset: 3px; }
.gz-post-body a:hover{ color: var(--gz-amber-deep); text-decoration-color: currentColor; }
.gz-post-body img{ max-width: 100%; height: auto; margin: 8px 0; }
.gz-post-body strong{ font-weight: 700; color: var(--gz-ink); }
.gz-post-body hr{ border: none; border-top: 1px dashed var(--gz-line); margin: 40px 0; }

.gz-post-adjacent{
  max-width: 780px; margin: 8px auto 0; padding: 24px 24px 8px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--gz-line);
}
.gz-post-adjacent-link{ color: var(--gz-ink); text-decoration: none; padding: 14px 16px; border: 1px solid var(--gz-line); background: #fff; transition: border-color .15s ease, transform .15s ease; }
.gz-post-adjacent-link:hover{ border-color: var(--gz-amber-deep); transform: translateY(-2px); }
.gz-post-adjacent-link .k{ display: block; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gz-amber-deep); margin-bottom: 6px; }
.gz-post-adjacent-link .t{ display: block; font-family: "Outfit", sans-serif; font-weight: 700; font-size: 14.5px; color: var(--gz-ink); }
.gz-post-adjacent-link.next{ text-align: right; }
.gz-post-adjacent-link.is-empty{ border: none; }
@media (max-width: 640px){ .gz-post-adjacent{ grid-template-columns: 1fr; } .gz-post-adjacent-link.next{ text-align: left; } }

/* ===================================================================
 * GZ-CONTACT — "Direct Line" split panel. Was six stacked full-width
 * sections rebuilt from parts shared with About/Services (some with no
 * CSS of their own at all); replaced with one dossier-style two-column
 * panel so the page reads as its own idea, not a recombination of the
 * shared kit.
 * =================================================================== */
.gz-contact-intro{ padding: 64px 24px 24px; text-align: center; }
.gz-contact-intro-inner{ max-width: 620px; margin: 0 auto; }
.gz-contact-kicker{
  display: inline-block; font-family: "Outfit", sans-serif !important; font-size: 10.5px;
  font-weight: 600 !important; letter-spacing: .12em; text-transform: uppercase; color: var(--gz-amber-deep);
  border-bottom: 2px solid var(--gz-amber-deep); padding-bottom: 4px; margin-bottom: 18px;
}
.gz-contact-intro-inner h1{
  font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(28px,4vw,42px);
  line-height: 1.1; letter-spacing: -.015em; color: var(--gz-ink); margin: 0 0 14px; text-wrap: balance;
}
.gz-contact-sub{ font-size: 15px; color: var(--gz-muted); line-height: 1.55; max-width: 48ch; margin: 0 auto; }

.gz-contact-stage{ padding: 24px 24px 64px; }
.gz-contact-grid{
  max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 26px; align-items: start;
}
@media (max-width: 860px){ .gz-contact-grid{ grid-template-columns: 1fr; } }

/* Chat is the primary interaction now, not a form — same white card
   treatment as before, but built around #gz-chat-ask-form/-answer (the
   exact engine /pricing/ uses, functions.php's gz_chat_ask AJAX handler)
   instead of Contact Form 7. */
.gz-contact-chat-card{ background: #fff; border: 1px solid var(--gz-line); padding: 40px; box-shadow: 0 20px 44px -30px rgba(20,24,27,.3); }
.gz-contact-prefill-note{ font-size: 13.5px; color: var(--gz-muted); background: var(--gz-tint); border: 1px solid var(--gz-line); padding: 12px 14px; margin: 0 0 20px; }
.gz-contact-chat-label{ display: block; font-family: "Outfit", sans-serif !important; font-size: 11px; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--gz-blue-dark); margin-bottom: 12px; }
.gz-contact-chat-card .gz-contact-wa{ margin-top: 18px; }
.gz-contact-email-fallback{ margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--gz-line); }
.gz-contact-email-fallback summary{ cursor: pointer; font-size: 13px; font-weight: 700; color: var(--gz-blue-dark); list-style: none; }
.gz-contact-email-fallback summary::-webkit-details-marker{ display: none; }
.gz-contact-email-fallback summary:hover{ text-decoration: underline; }
.gz-contact-email-fallback[open] summary{ margin-bottom: 18px; }

.gz-contact-dossier{ background: var(--gz-charcoal); color: #F2F0EA; padding: 36px 34px; display: flex; flex-direction: column; gap: 18px; }
.gz-contact-dossier-block{ display: flex; flex-direction: column; gap: 2px; }
.gz-contact-dossier-block .k{ font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gz-mist); margin-bottom: 3px; }
.gz-contact-dossier-block span, .gz-contact-dossier-block a{ font-size: 14.5px; color: #F2F0EA; text-decoration: none; }
.gz-contact-dossier-block a:hover{ color: var(--gz-amber-light); text-decoration: underline; }
.gz-contact-wa{
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: #128C4A; color: #fff;
  font-size: 13.5px; font-weight: 700; padding: 10px 16px; text-decoration: none; margin-top: 4px;
}
.gz-contact-wa:hover{ background: #0F7A40; }
.gz-contact-dossier-divider{ height: 1px; background: rgba(242,240,234,.14); margin: 4px 0; }
.gz-contact-faq{ display: flex; flex-direction: column; gap: 4px; }
.gz-contact-faq-item{ border-bottom: 1px dashed rgba(242,240,234,.18); padding: 10px 0; }
.gz-contact-faq-item:last-child{ border-bottom: none; }
.gz-contact-faq-item summary{
  cursor: pointer; font-size: 13.5px; font-weight: 700; color: #F2F0EA; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.gz-contact-faq-item summary::-webkit-details-marker{ display: none; }
.gz-contact-faq-item summary::after{ content: '+'; font-family: "JetBrains Mono", monospace; color: var(--gz-amber-light); font-size: 16px; flex: none; }
.gz-contact-faq-item[open] summary::after{ content: '\2212'; }
.gz-contact-faq-item p{ font-size: 12.5px; color: var(--gz-mist); line-height: 1.55; margin: 8px 0 0; }

/* ===================================================================
 * GZ-SHOP / GZ-ACCOUNT / GZ-ORDER — real template overrides for Shop
 * archive, My Account, and Order-received, replacing raw default
 * WooCommerce/Kadence markup that only had a thin custom hero band on
 * top. Same plain-bordered-card recipe as .gz-ql-card/.gz-cart-card
 * (2px radius, thin border, soft shadow) — no clip-path wobble, no
 * scroll-reveal (.panel) on any of these three, same short-page reveal
 * risk documented on cart/checkout.
 * =================================================================== */

/* --- Shop archive + product card --- */
.gz-shop-toolbar{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.gz-shop-toolbar .woocommerce-result-count{ font-size: 13px; color: var(--gz-muted); margin: 0; }
.gz-shop-toolbar select.orderby{
  border: 1.5px solid var(--gz-line); border-radius: 2px; padding: 9px 12px; font-size: 13px;
  font-family: "Inter", sans-serif; background: #fff; color: var(--gz-ink);
}
.gz-shop-grid{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px;
}
.gz-shop-card{
  position: relative; background: #fff; border: 1px solid var(--gz-line); border-radius: 2px;
  box-shadow: 0 10px 24px -16px rgba(20,24,27,.25);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.gz-shop-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(20,24,27,.32); }
.gz-shop-card-link{ display: block; color: inherit; text-decoration: none; }
.gz-shop-card-link a{ text-decoration: none; color: inherit; display: block; }
.gz-shop-card-media{ display: block; aspect-ratio: 4/3; background: var(--gz-tint); overflow: hidden; }
.gz-shop-card-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.gz-shop-card-body{ padding: 18px 20px 4px; }
.gz-shop-card-kicker{
  display: inline-block; font-size: 10px !important; letter-spacing: .08em; color: var(--gz-blue-dark); margin-bottom: 8px;
}
.gz-shop-card-body h2, .gz-shop-card-body .woocommerce-loop-product__title{
  font-family: "Outfit", sans-serif; font-weight: 700; font-size: 15.5px; margin: 0 0 8px; line-height: 1.3; color: var(--gz-ink);
}
.gz-shop-card-body .price{
  font-family: "JetBrains Mono", monospace !important; font-size: 16px; font-weight: 700; color: var(--gz-blue-dark) !important;
}
.gz-shop-card-foot{ padding: 12px 20px 20px; margin-top: auto; }
.gz-shop-card-foot .button{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  background: var(--gz-blue); color: var(--gz-ink); font-family: "Outfit", sans-serif; font-weight: 700;
  font-size: 12.5px; padding: 10px 14px; border-radius: 2px; text-decoration: none; text-align: center;
  border: none; cursor: pointer; transition: transform .15s ease;
}
.gz-shop-card-foot .button:hover{ transform: translateY(-2px); background: var(--gz-blue); color: var(--gz-ink); }
.gz-shop-pagination{ margin-top: 40px; text-align: center; }
.gz-shop-pagination .page-numbers{
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; margin: 0 3px;
  border: 1px solid var(--gz-line); border-radius: 2px; font-size: 13px; color: var(--gz-ink); text-decoration: none;
}
.gz-shop-pagination .page-numbers.current{ background: var(--gz-ink); color: #fff; border-color: var(--gz-ink); }

/* --- My Account shell --- */
.gz-account-shell{ display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
@media (max-width: 780px){ .gz-account-shell{ grid-template-columns: 1fr; gap: 28px; } }
/* "customer account" [screenshot: sidebar nav text wrapping one letter
   per line] -- the WooCommerce version update introduced a new wrapper
   div (.account-navigation-wrap, around the nav <ul>) that didn't exist
   in the version this theme was built against, confirmed live via
   getComputedStyle: it was collapsing to a ~66px width with no CSS of
   ours ever targeting it, taking the whole nav column down with it
   (link text wrapping character-by-character in the leftover sliver).
   Not present in every WooCommerce version, so this only needs to force
   it to actually fill the real 220px column already reserved for it in
   .gz-account-shell, not replace the grid itself. */
.gz-account-nav .account-navigation-wrap{ width: 100% !important; }
.gz-account-nav .kadence-account-avatar{ width: 100% !important; }
.gz-account-nav .woocommerce-MyAccount-navigation{ width: 100% !important; }
.gz-account-nav .woocommerce-MyAccount-navigation ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; width: 100% !important; }
.gz-account-nav .woocommerce-MyAccount-navigation-link{ width: 100% !important; }
.gz-account-nav .woocommerce-MyAccount-navigation-link a{ width: auto !important; white-space: nowrap; }
.gz-account-nav .woocommerce-MyAccount-navigation-link a{
  display: block; padding: 11px 16px; border-radius: 2px; font-size: 13.5px; font-weight: 600;
  color: var(--gz-muted); text-decoration: none; border-left: 3px solid transparent;
}
.gz-account-nav .woocommerce-MyAccount-navigation-link a:hover{ background: var(--gz-tint); color: var(--gz-ink); }
.gz-account-nav .woocommerce-MyAccount-navigation-link.is-active a{
  background: var(--gz-tint); color: var(--gz-ink); border-left-color: var(--gz-blue); font-weight: 700;
}
.gz-account-nav .woocommerce-MyAccount-navigation-link--customer-logout a{ color: var(--gz-blue-dark); }
.gz-account-content{ min-width: 0; }
.gz-account-content .woocommerce-MyAccount-content > p:first-child{ font-size: 14.5px; line-height: 1.65; color: var(--gz-muted); margin: 0 0 24px; }

/* Orders / downloads tables (dashboard, order history, downloads) */
.gz-account-content table.shop_table,
.gz-account-content table.woocommerce-orders-table{
  width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 0 0 20px;
}
.gz-account-content table.shop_table thead th{
  text-align: left; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gz-muted); font-weight: 700; padding: 0 12px 10px; border-bottom: 1.5px solid var(--gz-line);
}
.gz-account-content table.shop_table tbody td{ padding: 14px 12px; border-bottom: 1px solid var(--gz-line); vertical-align: middle; }
.gz-account-content table.shop_table tbody tr:last-child td{ border-bottom: none; }
.gz-account-content .woocommerce-orders-table__cell-order-number a{ color: var(--gz-blue-dark); font-weight: 700; text-decoration: none; }
.gz-account-content .woocommerce-orders-table__cell-order-status{ font-size: 12px; }
.gz-account-content .woocommerce-orders-table__cell-order-actions .button,
.gz-account-content .woocommerce-MyAccount-downloads-file a{
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 2px; font-size: 12px; font-weight: 700;
  background: var(--gz-ink); color: #fff; text-decoration: none;
}
.gz-account-content .woocommerce-orders-table__cell-order-actions .button:hover{ background: var(--gz-blue); color: var(--gz-ink); }

/* --- Order received --- */
.gz-order-shell{ max-width: 640px; margin: 0 auto; }
.gz-order-received-text{ font-size: 15px; line-height: 1.6; color: var(--gz-muted); text-align: center; margin: 0 0 28px; }
.gz-order-card{
  background: #fff; border: 1px solid var(--gz-line); border-left: 4px solid var(--gz-blue); border-radius: 2px;
  box-shadow: 0 10px 24px -16px rgba(20,24,27,.25); padding: 8px 26px; margin-bottom: 28px;
}
.gz-order-dashboard-cta{ display: block; text-align: center; padding: 14px 20px; margin-bottom: 28px; font-weight: 700; }
.gz-order-card-row{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--gz-line);
}
.gz-order-card-row:last-child{ border-bottom: none; }
.gz-order-card-row strong{ font-family: "Outfit", sans-serif; font-size: 14px; color: var(--gz-ink); text-align: right; }
.gz-order-card-total strong{ font-family: "JetBrains Mono", monospace; font-size: 20px; color: var(--gz-blue-dark); }
.gz-order-shell .gz-post-purchase-timeline{
  background: #fff; border: 1px solid var(--gz-line); border-radius: 2px; padding: 24px 26px; border-top: none;
  box-shadow: 0 10px 24px -16px rgba(20,24,27,.25);
}
.gz-order-failed{ text-align: center; }
.gz-order-failed p{ font-size: 14.5px; color: var(--gz-muted); margin: 0 0 20px; }
.gz-order-failed-actions{ display: flex; gap: 12px; justify-content: center; }

/* ===================================================================
 * GZ-CONTRACT — checkout's pre-payment contract review + signature pad.
 * Same plain-bordered-card recipe as the rest of cart/checkout.
 * =================================================================== */
.gz-contract-stage{ padding-top: 0; }
.gz-contract-scroll{
  max-width: 780px; margin: 0 auto 28px; max-height: 380px; overflow-y: auto;
  background: #fff; border: 1px solid var(--gz-line); border-radius: 2px;
  padding: 26px 30px; box-shadow: 0 10px 24px -16px rgba(20,24,27,.2);
}
.gz-contract-doc p{ font-size: 13px; line-height: 1.65; color: var(--gz-muted); margin: 0 0 14px; }
.gz-contract-doc p strong{ color: var(--gz-ink); }
.gz-contract-doc h4{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 14px; color: var(--gz-ink); margin: 22px 0 10px; }
.gz-contract-table{ width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 0 0 14px; }
.gz-contract-table th{
  text-align: left; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gz-muted); padding: 0 8px 8px; border-bottom: 1.5px solid var(--gz-line);
}
.gz-contract-table td{ padding: 8px; border-bottom: 1px solid var(--gz-line); color: var(--gz-ink); }
.gz-contract-sign-block{
  display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--gz-line);
}
.gz-contract-sign-block > div{ flex: 1 1 200px; }
.gz-contract-sign-block .k{ display: block; margin-bottom: 6px; }
.gz-contract-sign-block strong{ font-family: "Outfit", sans-serif; font-size: 14px; color: var(--gz-ink); }

.gz-contract-signpad{ max-width: 780px; margin: 0 auto 16px; }
.gz-contract-signpad-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
/* .k only sets font-family/font-weight globally (see the base .gz-eyebrow,
   .k rule) — every other kicker usage sits inside a selector that also
   sets its own font-size; this one never did, so "Sign Above The Line"
   rendered at the ambient body text size instead of as a small kicker
   label. At normal body size it was wide enough to force the Clear
   button below it onto its own wrapped line ("CLEA"/"R") on any narrow
   viewport — confirmed live on mobile checkout. */
.gz-contract-signpad-head .k{
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gz-muted);
}
.gz-contract-clear{
  font-family: "Outfit", sans-serif; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gz-blue-dark); background: none; border: 1px solid var(--gz-line); border-radius: 2px; padding: 6px 12px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.gz-contract-clear:hover{ border-color: var(--gz-blue); }
.gz-sig-canvas{
  display: block; width: 100%; height: 160px; background: #fff repeating-linear-gradient(0deg, transparent, transparent 39px, var(--gz-line) 40px);
  border: 1.5px dashed var(--gz-blue); border-radius: 2px; cursor: crosshair; touch-action: none;
}
.gz-contract-hint{ font-size: 12px; color: var(--gz-muted); margin: 8px 0 0; text-align: center; }
.gz-contract-agree{
  display: flex; align-items: flex-start; gap: 10px; max-width: 780px; margin: 0 auto 32px;
  font-size: 13px; color: var(--gz-ink); line-height: 1.5; cursor: pointer;
}
.gz-contract-agree input{ margin-top: 3px; }
body.woocommerce-checkout #place_order:disabled{ transform: none !important; }

/* ===================================================================
 * GZ-CHECKOUT-SHELL — real redesign of the single-page checkout layout,
 * not another patch on the old all-stacked-vertically composition.
 * Two-column layout (order/billing/contract on the left, a sticky
 * order-summary + payment sidebar on the right) — the standard modern
 * checkout pattern (Shopify, Stripe Checkout), so the payment box never
 * again reads as a small disconnected island at the bottom of a long
 * page. .gz-checkout-form-contents{display:contents} is what makes this
 * possible without nesting <form> tags: the <form class="checkout">
 * itself becomes invisible to layout (still submits completely
 * normally — display:contents doesn't affect form behavior, only
 * visual box rendering), so its two children can sit in the outer
 * grid's left/right columns directly, right alongside the separate
 * cart-editing <form> above them.
 * =================================================================== */
.gz-checkout-shell{
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 28px; align-items: start;
  max-width: 1240px; margin: 0 auto; padding: 56px 24px;
}
.gz-checkout-form-contents{ display: contents; }
/* Kadence wraps the cart-editing <form> in its own .kadence-woo-cart-
   form-wrap div (component.php, cart_form_wrap_before/_after, hooked to
   woocommerce_before_cart / _after_cart) — a normal block div, not
   display:contents, so it's the actual direct grid child here, not the
   <form> inside it. grid-column/grid-row set on the form itself had no
   effect (only applies to real grid items) — confirmed live, the cart
   card rendered in the right column despite computing grid-column:1 on
   itself. Same display:contents pass-through fix as the checkout form,
   applied to Kadence's wrapper this time. */
.gz-checkout-shell > .kadence-woo-cart-form-wrap{ display: contents; }
/* Explicit 2x2 placement, exact order given directly: billing top-left,
   contract+sign top-right, cart items bottom-left, order review+payment
   bottom-right. Can't rely on DOM order for this (see the long comment
   in form-checkout.php on why) — each cell gets its own coordinates. */
.gz-checkout-cell-billing{ grid-column: 1; grid-row: 1; }
.gz-checkout-cell-contract{ grid-column: 2; grid-row: 1; }
.gz-checkout-cell-cart{ grid-column: 1; grid-row: 2; }
.gz-checkout-cell-summary{ grid-column: 2; grid-row: 2; position: sticky; top: 24px; }
.gz-checkout-cell{ min-width: 0; }
/* Breathing room between the contract card and the package-unlock
   banner now stacked below it in the same column -- the banner's own
   margin only ever gave it space below, not above. */
.gz-checkout-cell-contract .gz-cart-unlock{ margin-top: 20px; }
@media (max-width: 900px){
  .gz-checkout-shell{ grid-template-columns: 1fr; padding: 32px 20px; }
  .gz-checkout-cell-billing, .gz-checkout-cell-contract, .gz-checkout-cell-cart, .gz-checkout-cell-summary{
    grid-column: 1; position: static;
  }
  .gz-checkout-cell-billing{ grid-row: 1; } .gz-checkout-cell-cart{ grid-row: 2; }
  .gz-checkout-cell-contract{ grid-row: 3; } .gz-checkout-cell-summary{ grid-row: 4; }
  .gz-checkout-col-main, .gz-checkout-col-side{ grid-column: 1; }
  .gz-checkout-col-side{ position: static; }
}
/* Phone-width tightening — the 900px breakpoint above only ever reduced
   the outer .gz-checkout-shell padding; every card nested inside it
   (.gz-checkout-card, #order_review, .gz-contract-scroll) kept its full
   desktop padding regardless, so on an actual phone (~375px) the two
   paddings stacked — 20px shell + 32px card each side — left barely
   260px of real content width for form fields, the contract text and
   the signature pad. Reported back live as "cramped"; this is the
   actual cause, not any single element. */
@media (max-width: 560px){
  .gz-checkout-shell{ padding: 20px 12px; gap: 18px; }
  .gz-checkout-card{ padding: 20px 18px; }
  .gz-checkout-card-head h2{ font-size: 19px; }
  body.woocommerce-checkout #order_review{ padding: 22px 18px 20px !important; }
  body.woocommerce-checkout #order_review .order-total td{ font-size: 28px !important; }
  .gz-contract-scroll{ padding: 18px 16px; max-height: 320px; }
  .gz-contract-signpad, .gz-contract-agree{ max-width: none; }
  .gz-sig-canvas{ height: 130px; }
}

/* Shared card recipe for every left-column block (order items, billing,
   contract) — same plain-bordered-card language as the rest of the
   site, consistent across all three instead of each having its own
   one-off wrapper (the fragmentation that caused the mismatched-box
   problem in the first place). */
.gz-checkout-card{
  background: #fff; border: 1px solid var(--gz-line); border-radius: 2px;
  box-shadow: 0 10px 24px -16px rgba(20,24,27,.2); padding: 30px 32px;
}
.gz-checkout-card-head{ margin-bottom: 24px; }
.gz-checkout-card-head h2{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: 22px; margin: 8px 0 0; color: var(--gz-ink); }

/* Billing + notes now live inside ONE .gz-checkout-card, single column
   — "Additional information" was its own separately-boxed card of very
   different height sitting beside billing; now it's just the last
   field in the same form, not a second box. */
.gz-checkout-notes-field{ margin-top: 8px; }
.gz-checkout-notes-field h3{
  font-family: "Outfit", sans-serif; font-weight: 600; font-size: 13px; color: var(--gz-muted);
  margin: 0 0 10px; text-transform: uppercase; letter-spacing: .04em;
}
.gz-checkout-notes-field textarea{ min-height: 80px; resize: vertical; }

/* Sticky summary sidebar: #order_review already carries its own dark
   charcoal "featured card" treatment (border, padding, badge heading) —
   this wrapper only needs to size/position it within the column, not
   duplicate that styling. */
.gz-checkout-summary-card{ width: 100%; }
.gz-checkout-review-inner .cart-collaterals,
.cart-collaterals{ max-width: none; margin-left: 0; width: 100%; }
body.woocommerce-checkout #order_review{ width: 100%; box-sizing: border-box; }

/* Product page center-alignment when there's no gallery image — was
   left-aligned by default (WooCommerce's normal two-column product
   layout assumption: image left, summary right), which reads as
   randomly indented with nothing to its left when there's no image at
   all. Centered instead, and the price/description gap tightened (was
   inheriting a generous default margin meant to separate a price badge
   from a short_description that used to sit much further down). */
/* Reverted from centered text sitewide-in-panel (made numbered lists /
   meta lines read worse, not better — "messed up more" once actually
   seen) to a narrower single column instead. The real problem was never
   text-align, it was the panel stretching to the full 1080px card width
   with nothing (no gallery image) to balance that width against — a
   narrower, left-aligned column is the standard fix for "content with
   no image," reads cleanly, and doesn't leave the huge blank margins a
   1080px-wide card produces around a couple of short lines. */
.gz-product-hero-stage--no-gallery .gz-product-summary-panel{ max-width: 640px; margin: 0 auto; }

/* ===================================================================
 * GZ-DASH — client dashboard (My Account: Services / Contract /
 * Support tabs). Reuses the checkout system's own card recipe
 * (.gz-checkout-card: white card, hairline border, soft drop shadow)
 * instead of inventing a fourth visual language for "boxed content on
 * a light section" — this is the same kind of thing cart/checkout/
 * contract already are.
 * =================================================================== */
.gz-dash-octo-link{
  display: inline-block; margin-bottom: 24px; padding: 12px 22px;
  background: var(--gz-blue); color: var(--gz-ink); font-family: "Outfit", sans-serif;
  font-weight: 700; font-size: 14px; border-radius: 2px; text-decoration: none;
}
.gz-dash-octo-link:hover{ background: var(--gz-blue-light); }

.gz-dash-order-card, .gz-dash-contract-card{
  background: #fff; border: 1px solid var(--gz-line); border-radius: 2px;
  box-shadow: 0 10px 24px -16px rgba(20,24,27,.2); padding: 26px 28px; margin-bottom: 20px;
}
.gz-dash-order-head{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--gz-line);
}
.gz-dash-order-head .k{ margin: 0; }
.gz-dash-order-date{ font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--gz-muted); }
/* Refund-eligibility line, plain and unmissable -- "work started"
   reflected on the dashboard is the actual refund-window record per
   the strict refund policy, not just a status label. */
.gz-dash-work-started{
  display: flex; align-items: center; gap: 8px; margin: 0 0 18px;
  font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.gz-dash-work-started .dot{ width: 8px; height: 8px; border-radius: 50%; flex: none; }
.gz-dash-work-started.is-started{ color: var(--gz-blue-dark); }
.gz-dash-work-started.is-started .dot{ background: #2E9B5A; box-shadow: 0 0 6px 1px rgba(46,155,90,.5); }
.gz-dash-work-started.is-pending{ color: var(--gz-amber-deep); }
.gz-dash-work-started.is-pending .dot{ background: var(--gz-amber); box-shadow: 0 0 6px 1px rgba(217,154,62,.5); }
.gz-dash-work-started a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.gz-dash-service-row{ padding: 14px 0; border-bottom: 1px dashed var(--gz-line); }
.gz-dash-service-row:last-child{ border-bottom: none; padding-bottom: 0; }
.gz-dash-service-name{ display: block; font-family: "Outfit", sans-serif; font-weight: 700; font-size: 15px; color: var(--gz-ink); margin-bottom: 12px; }

.gz-dash-tracker{ display: flex; gap: 4px; }
.gz-dash-tracker-step{ flex: 1; text-align: center; position: relative; }
.gz-dash-tracker-step::before{
  content: ''; position: absolute; top: 5px; left: -50%; width: 100%; height: 2px; background: var(--gz-line); z-index: 0;
}
.gz-dash-tracker-step:first-child::before{ display: none; }
.gz-dash-tracker-step.is-done::before{ background: var(--gz-blue); }
.gz-dash-tracker-dot{
  position: relative; z-index: 1; display: block; width: 12px; height: 12px; margin: 0 auto 6px;
  border-radius: 50%; background: #fff; border: 2px solid var(--gz-line);
}
.gz-dash-tracker-step.is-done .gz-dash-tracker-dot{ background: var(--gz-blue); border-color: var(--gz-blue); }
.gz-dash-tracker-label{
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: var(--gz-muted);
}
.gz-dash-tracker-step.is-done .gz-dash-tracker-label{ color: var(--gz-ink); font-weight: 700; }
/* Four columns of a multi-word label ("DELIVERED / LIVE") in ~10px type
   had no room to fit even one word per column on a phone-width card —
   confirmed live, labels were breaking mid-word ("ONBO/ARDI/NG").
   Vertical checklist instead of a horizontal stepper below this width —
   the standard, robust fix for a step tracker that has to fit a phone,
   not a narrower version of the same 4-across layout. */
@media (max-width: 480px){
  .gz-dash-tracker{ flex-direction: column; gap: 10px; align-items: flex-start; }
  .gz-dash-tracker-step{ flex: none; width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; }
  .gz-dash-tracker-step::before{ display: none; }
  .gz-dash-tracker-dot{ margin: 0; flex-shrink: 0; }
  .gz-dash-tracker-label{ font-size: 11px; }
}
.gz-dash-service-note{ font-size: 13px; color: var(--gz-muted); margin: 12px 0 0; font-style: italic; }
.gz-dash-service-updated{ font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--gz-muted); margin: 6px 0 0; opacity: .8; }

.gz-dash-contract-text{ margin: 0 0 20px; max-width: none; }
.gz-dash-sign-row{ display: flex; flex-wrap: wrap; gap: 24px; padding-top: 18px; border-top: 1px dashed var(--gz-line); }
.gz-dash-sign-row > div{ flex: 1 1 200px; }
.gz-dash-sig-img{ max-width: 220px; display: block; border: 1px solid var(--gz-line); background: #fff; margin: 4px 0; }
.gz-agency-sig-script{ font-family: "Georgia", serif; font-style: italic; font-size: 26px; color: var(--gz-blue-dark); display: inline-block; margin: 4px 0; }
.gz-dash-sig-date{ font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--gz-muted); }
.gz-dash-sig-pending{ font-size: 13px; color: var(--gz-amber-deep); font-weight: 600; }
.gz-dash-print{ margin-top: 20px; }

.gz-dash-ticket-list{ margin-bottom: 32px; }
.gz-dash-ticket-row{
  display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none;
  padding: 16px 18px; margin-bottom: 8px; background: #fff; border: 1px solid var(--gz-line); border-radius: 2px;
}
.gz-dash-ticket-row:hover{ border-color: var(--gz-blue); }
.gz-dash-ticket-subject{ font-family: "Outfit", sans-serif; font-weight: 700; font-size: 14.5px; color: var(--gz-ink); }
.gz-dash-ticket-status{ font-family: "JetBrains Mono", monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 20px; }
.gz-dash-ticket-status.is-open{ color: #1a7a4c; background: rgba(26,122,76,.12); }
.gz-dash-ticket-status.is-closed{ color: var(--gz-muted); background: var(--gz-tint); }

.gz-dash-reply-form{
  background: #fff; border: 1px solid var(--gz-line); border-radius: 2px; padding: 26px 28px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 24px -16px rgba(20,24,27,.2);
}
.gz-dash-reply-form h3{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: 18px; color: var(--gz-ink); margin: 0 0 4px; }
.gz-dash-reply-form input[type="text"], .gz-dash-reply-form textarea{
  width: 100%; box-sizing: border-box; border: 1px solid var(--gz-line); border-radius: 2px; padding: 12px 14px;
  font-family: "Inter", sans-serif; font-size: 14px; color: var(--gz-ink);
}
.gz-dash-reply-form textarea{ min-height: 110px; resize: vertical; }
.gz-dash-reply-form button{ align-self: flex-start; }

.gz-dash-back{ display: inline-block; font-size: 13px; color: var(--gz-blue-dark); text-decoration: none; margin-bottom: 16px; font-weight: 600; }
.gz-dash-back:hover{ text-decoration: underline; }
.gz-dash-ticket-thread .gz-dash-order-head{ margin-top: 0; }
.gz-dash-thread{ display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.gz-dash-msg{ padding: 14px 18px; border-radius: 2px; background: var(--gz-tint); border: 1px solid var(--gz-line); max-width: 82%; }
.gz-dash-msg.is-agency{ margin-left: auto; background: #fff; border-color: var(--gz-blue); }
.gz-dash-msg-from{ display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--gz-blue-dark); margin-bottom: 4px; font-weight: 700; }
.gz-dash-msg-text p{ font-size: 13.5px; line-height: 1.6; color: var(--gz-ink); margin: 0 0 6px; }
.gz-dash-msg-text p:last-child{ margin-bottom: 0; }
.gz-dash-msg-date{ font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--gz-muted); opacity: .8; }
@media (max-width: 600px){
  .gz-dash-msg{ max-width: 100%; }
  .gz-dash-order-card, .gz-dash-contract-card, .gz-dash-reply-form{ padding: 20px; }
}

/* ===================================================================
 * GZ-NEXT-STEPS -- "What Happens After You Buy," on service-single and
 * package-detail pages. Real facts only (the contract's own onboarding
 * clause, and the 3-5 day start already quoted on the Contact page's
 * FAQ), not invented copy -- see the section's PHP for exact sourcing.
 * =================================================================== */
.gz-next-stage{ max-width: 900px; margin: 0 auto; padding: 56px 24px 56px; }
.gz-next-panel{
  background: #fff; border: 1px solid var(--gz-line); border-radius: 2px;
  box-shadow: 0 10px 24px -16px rgba(20,24,27,.2); padding: 36px 38px;
}
.gz-next-panel > .k{ display: block; margin-bottom: 22px; }
.gz-next-steps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.gz-next-step{ position: relative; }
.gz-next-num{
  display: block; font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700;
  color: var(--gz-blue); letter-spacing: .06em; margin-bottom: 10px;
}
.gz-next-step h3{ font-family: "Outfit", sans-serif; font-weight: 800; font-size: 17px; color: var(--gz-ink); margin: 0 0 8px; }
.gz-next-step p{ font-size: 13.5px; line-height: 1.6; color: var(--gz-muted); margin: 0; }
@media (max-width: 720px){
  .gz-next-steps{ grid-template-columns: 1fr; gap: 22px; }
  .gz-next-panel{ padding: 26px 22px; }
}

/* ===================================================================
 * GZ-SEAM -- literal "connection" moment at real light<->dark section
 * boundaries: "these links someone sends something, blue link reaches
 * satellite in black part and back to other phone or server or
 * something in cream part." A real DOM element straddling the two
 * sections (negative margins, adds no extra page height), a small
 * device glyph on the light/earth end, a small satellite-ping on the
 * dark/space end, a traveling pulse between them. Direction encodes
 * which way the "signal" is travelling: .gz-seam-up = light section
 * ending, dark beginning (message sent up to the satellite);
 * .gz-seam-down = dark ending, light beginning (message arriving back
 * down to earth) -- together these tell the round-trip across the
 * site's own natural rhythm of alternating sections, not one single
 * page's contrived up-and-back. Pure CSS animation, no JS, so it costs
 * nothing off-screen and respects prefers-reduced-motion for free.
 * =================================================================== */
/* Satellite mark is 38px, device mark 26px (see below). Earlier version
   only overlapped INTO the dark neighbor (negative margin on that one
   side) and left a plain real gap on the light side, relying on the
   gap showing the page's own cream body background (#wrapper.site) to
   read as "correct." That's fragile -- reported live: the device marks
   sat in their own visible strip, not blended into the actual next
   section, because that real section usually isn't the exact same
   cream as the body background (a different card/tint tone right
   below). Fix: overlap BOTH ends for real, into whichever section is
   actually there -- 64px into the dark side (38px satellite + 26px
   buffer), 50px into the light side (26px device + 24px buffer) -- so
   the seam's own (transparent) box is never the thing painting a gap;
   it's always sitting on a real section's real background, right up
   to both edges, and disappears where the neighbor's own top padding
   naturally takes over. */
/* z-index: 2 wasn't enough to paint above a LATER sibling section's own
   background/canvas -- a later sibling's box still paints over an
   earlier one in the region where the seam's negative margin makes
   them geometrically overlap. Pushed well above anything else this
   could ever sit next to. */
.gz-seam{
  position: relative; z-index: 20; height: 114px;
  display: flex; align-items: center; justify-content: space-between;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 0 7vw; pointer-events: none; box-sizing: border-box;
}
/* down: dark before/above, light after/below. */
.gz-seam-down{ margin-top: -64px; margin-bottom: -50px; }
/* up: light before/above, dark after/below -- exact mirror. */
.gz-seam-up{ margin-top: -50px; margin-bottom: -64px; }
/* "what i meant by 3 devices 3 satellites" -- three full connector
   strands spread across the seam's width (left / center / right), not
   three icon styles taking turns one at a time. Each strand carries
   its own line + travelling dot + one of the three device/satellite
   glyph variants, so a single seam genuinely shows all three of each. */
.gz-seam-strand{ position: relative; width: 2px; height: 100%; }
/* Line runs exactly between where the satellite mark ends (38px from
   the strand's top) and where the device mark begins (26px from the
   strand's bottom) -- a clean handoff between the two, not an
   arbitrary inset independent of the actual icon sizes. */
.gz-seam-line{
  position: absolute; top: 38px; bottom: 26px; width: 2px;
  background: linear-gradient(180deg, rgba(33,171,218,0) 0%, rgba(33,171,218,.55) 50%, rgba(33,171,218,0) 100%);
}
.gz-seam-dot{
  position: absolute; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: #B9EAFB; box-shadow: 0 0 12px 3px rgba(185,234,251,.9);
  animation: gz-seam-travel 4.5s ease-in-out infinite;
}
.gz-seam-strand:nth-child(2) .gz-seam-dot{ animation-delay: -1.5s; }
.gz-seam-strand:nth-child(3) .gz-seam-dot{ animation-delay: -3s; }
.gz-seam-up .gz-seam-dot{ animation-direction: normal; }
.gz-seam-down .gz-seam-dot{ animation-direction: reverse; }
@keyframes gz-seam-travel{
  0%   { top: 38px;  opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: calc(100% - 26px); opacity: 0; }
}
.gz-seam-mark{
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
}
.gz-seam-mark svg{ width: 100%; height: 100%; }
/* Satellite bigger and more prominent than the device mark -- it's the
   one sitting in the roomier dark/space half of the seam, the device
   mark stays modest against the busier cream content below it. */
.gz-seam-mark.is-satellite{ width: 38px; height: 38px; filter: drop-shadow(0 0 6px rgba(79,195,232,.5)); }
/* Which end each mark sits on depends on which way the section color
   actually runs, not a fixed top/bottom -- .gz-seam-down means dark is
   ABOVE (satellite belongs at the top, device below); .gz-seam-up means
   dark is BELOW (device belongs at the top, satellite below). Getting
   this backwards on the up-seams was the exact bug reported live: the
   satellite mark showing on the cream side instead of the dark one. */
.gz-seam-down .gz-seam-mark.is-satellite{ top: 0; color: #4FC3E8; }
.gz-seam-down .gz-seam-mark.is-device{ bottom: 0; color: var(--gz-blue-dark); }
.gz-seam-up .gz-seam-mark.is-device{ top: 0; color: var(--gz-blue-dark); }
.gz-seam-up .gz-seam-mark.is-satellite{ bottom: 0; color: #4FC3E8; }
@media (prefers-reduced-motion: reduce){ .gz-seam-dot{ animation: none; opacity: .7; top: 50%; } }
@media (max-width: 640px){
  /* Same reasoning as the desktop rule above, scaled to the smaller
     28px/18px mobile marks: satellite needs the full 28px clear in the
     dark overlap, device needs its 18px clear in the light gap. */
  .gz-seam{ height: 73px; padding: 0 9vw; }
  .gz-seam-down{ margin-top: -41px; margin-bottom: -32px; }
  .gz-seam-up{ margin-top: -32px; margin-bottom: -41px; }
  .gz-seam-line{ top: 28px; bottom: 18px; }
  .gz-seam-mark{ width: 18px; height: 18px; }
  .gz-seam-mark.is-satellite{ width: 28px; height: 28px; }
}

/* Universal seam clearance -- every gz-seam pulls itself into BOTH the
   section before it (negative margin-top) and the section after it
   (negative margin-bottom), so the icon/beam only reads right if both
   neighbors reserve at least that much padding. Patching this per
   template was fragile -- pages kept shipping with the icon biting into
   the first/last line of text because a template's padding was never
   checked against the seam's actual pull distance. Enforced once, for
   every current and future gz-seam usage, instead of per page. Floors
   are the largest pull either variant uses (64px desktop / 41px mobile)
   plus a safety margin; !important only overrides the padding-top/
   -bottom edge, so any section's left/right/other-edge padding is
   untouched. */
.gz-seam + *{ padding-top: 100px !important; }
.gz-section:has(+ .gz-seam),
.gz-pkgd-hero:has(+ .gz-seam),
.gz-contact-intro:has(+ .gz-seam),
.gz-page-hero-stage:has(+ .gz-seam),
[class]:has(+ .gz-seam){ padding-bottom: 100px !important; }
@media (max-width: 640px){
  .gz-seam + *{ padding-top: 68px !important; }
  [class]:has(+ .gz-seam){ padding-bottom: 68px !important; }
}

/* ===================================================================
 * GZ-PAGE-HERO-STAGE -- "can we do all pages heading sections same as
 * home page hero, that will have a huge impact on the design, also
 * easier to have that connection thing will be same in all pages...
 * hero can be bigger on home page. same style headings smaller on
 * individual pages but gets the effect and footer concludes the same."
 * A shared wrapper class added alongside each template's own existing
 * hero class (kept, not replaced -- its structure/copy/spacing stay
 * exactly what that template already had), so this only needs to
 * override colors + mount the same dark full-bleed Signal Field
 * treatment as the homepage hero, not rebuild each page's markup.
 * The mounting script itself is the exact one already used for
 * .gz-cta-stage / .gz-wwd2-close (see the wp_footer hook), just with
 * this class added to its selector list -- one scene-per-matched-
 * element loop, already proven, not a second implementation.
 * =================================================================== */
.gz-page-hero-stage{
  position: relative; overflow: hidden; z-index: 0;
  /* Same --gz-void unification as .gz-cta-stage/.site-footer -- "we are
     not using colors now, we are copying exact effect from hero
     everywhere." This was still on the old --gz-charcoal. */
  background: var(--gz-void) !important; background-image: none !important;
  -webkit-mask-image: none !important; mask-image: none !important;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-bottom: 108px;
}
/* The mounting script uses .gz-cta-stage-canvas for every dynamically
   created canvas sitewide now, including this stage's own -- excluding
   canvas here so this rule never fights the canvas's own
   position:absolute again. That fight was a real, confirmed bug: it
   silently won, turned the canvas into a normal flow block sized to its
   rendered pixel dimensions (800px+ tall), and inflated the whole hero
   section to match -- caught live on the service-single page. */
.gz-page-hero-stage > *:not(canvas){ position: relative; z-index: 1; }
/* Every text element inside, regardless of which template's own
   classes it carries -- broad and !important on purpose, this is a
   wrapper-level context reskin (light-bg copy becoming dark-bg copy),
   the same reasoning as the checkout order-review dark-card overrides
   elsewhere in this file. */
.gz-page-hero-stage h1, .gz-page-hero-stage h2, .gz-page-hero-stage h3{ color: var(--gz-cream) !important; }
.gz-page-hero-stage p, .gz-page-hero-stage .gz-sub, .gz-page-hero-stage .gz-contact-sub{ color: var(--gz-mist) !important; }
.gz-page-hero-stage .k, .gz-page-hero-stage .gz-wc-stub, .gz-page-hero-stage .gz-spec-eyebrow, .gz-page-hero-stage .gz-pkgd-kicker, .gz-page-hero-stage .gz-contact-kicker, .gz-page-hero-stage .gz-about2-eyebrow{
  color: var(--gz-blue-light) !important;
}
/* Any solid white/cream "card" nested in the original markup (frame,
   stub pill, dossier panel) becomes frosted glass on the dark ground
   instead of staying an opaque white box floating in space. */
.gz-page-hero-stage .gz-spec-hero-frame, .gz-page-hero-stage .gz-wc-stub, .gz-page-hero-stage .gz-calc-toggle{
  background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.18) !important;
  backdrop-filter: blur(6px);
}
.gz-page-hero-stage .gz-spec-from{ border-top-color: rgba(255,255,255,.18) !important; }
.gz-page-hero-stage .gz-spec-from .v{ color: var(--gz-blue-light) !important; }
.gz-page-hero-stage .gz-pkgd-switch, .gz-page-hero-stage a{ color: var(--gz-blue-light) !important; }
.gz-page-hero-stage .gz-calc-toggle button{ color: var(--gz-mist) !important; }
.gz-page-hero-stage .gz-calc-toggle button.is-on{ background: var(--gz-blue-light) !important; color: var(--gz-void) !important; }

/* Stat strip integrated into the dark hero itself instead of a
   separate light band right after it ("the bottom 3 number panel can
   just be integrated in the hero") -- same three-number layout, dark-
   appropriate colors (light label text, brighter blue numerals) since
   it's no longer sitting on --gz-tint. */
.gz-home-hero-stats{
  position: relative; z-index: 1; max-width: 1200px; margin: 44px auto 0; padding: 22px 24px 0;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px;
}
.gz-home-hero-stat{ display: flex; align-items: center; gap: 10px; text-decoration: none; transition: opacity .15s ease; }
a.gz-home-hero-stat:hover{ opacity: .8; }
.gz-home-hero-stat .num{
  font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 24px; color: var(--gz-blue-light);
  min-width: 3.5ch; text-align: right;
}
.gz-home-hero-stat .lbl{ font-size: 12.5px; color: var(--gz-mist); font-weight: 500; max-width: 20ch; line-height: 1.3; }
@media (max-width: 640px){ .gz-home-hero-stats{ margin-top: 28px; gap: 14px; } }

/* "hero buttons have spacing not needed" / "still with extra space" --
   first pass (gap 12px->8px) wasn't enough. Scoped to the hero row only
   (.gz-btn itself is used sitewide, safe to leave alone) -- gap down
   further, and the two hero buttons themselves get tighter padding than
   the sitewide .gz-btn default, since they read noticeably chunkier
   sitting side by side than any other single-button use of this class. */
/* Button-to-button gap was already tight (6px, confirmed live) — the
   actual remaining "extra space" was the "just testing the waters?"
   note wrapping to its own line in the narrower hero column (491px,
   not the full viewport) with a full 6px row-gap above it, on top of
   its own arrow icon that visually pointed sideways at the buttons and
   now just points at empty space above itself. Tighter row-gap when
   wrapped. The "just testing the waters" note itself was pulled off the
   page entirely -- didn't hold up across devices, kept forcing its own
   placement fixes -- so no note-flow rule needed here any more. */
.gz-home-hero-ctas{ gap: 8px; }
.gz-home-hero-ctas .gz-btn{ padding: 10px 18px; font-size: 13px; }

/* ===================================================================
 * GZ-COOKIE-BANNER -- GDPR + India DPDP standards. Accept/Reject
 * equally weighted (no dark pattern), fixed to the bottom so it never
 * blocks the content someone came to read, dismissable via either
 * choice, reopenable later from the footer's "Cookie Preferences" link.
 * =================================================================== */
.gz-cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  background: var(--gz-ink); color: #fff;
  box-shadow: 0 -8px 24px -10px rgba(0,0,0,.35);
}
.gz-cookie-banner[hidden]{ display: none; }
.gz-cookie-banner-inner{
  max-width: 1080px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.gz-cookie-banner-inner p{ flex: 1 1 420px; margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--gz-mist); }
.gz-cookie-banner-ctas{ display: flex; gap: 10px; flex: none; }
.gz-cookie-banner-ctas .gz-btn{ padding: 10px 18px; font-size: 13px; white-space: nowrap; }
.gz-cookie-banner-ctas .gz-btn-ghost{ border-color: rgba(255,255,255,.3); color: #fff; }
@media (max-width: 640px){
  .gz-cookie-banner-inner{ flex-direction: column; align-items: stretch; padding: 16px 20px; }
  .gz-cookie-banner-ctas{ justify-content: stretch; }
  .gz-cookie-banner-ctas .gz-btn{ flex: 1; }
}

/* ===== Contract Draft page -- same checkout-card shell, no scroll-box
 * constraint (a read-before-you-buy page should let the whole document
 * flow, not trap it in a 380px scroll pane meant for mid-checkout). ===== */
.gz-contract-draft-note{
  font-size: 13.5px; line-height: 1.6; color: var(--gz-muted);
  background: var(--gz-tint); border-left: 3px solid var(--gz-blue); padding: 14px 18px; margin: 0 0 26px;
}
.gz-contract-doc-wrap{ max-width: 780px; margin: 0 auto; }
.gz-contract-draft-ctas{ display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--gz-line); }

/* ===== Standalone FAQ section (Contact page) -- light-bg counterpart
 * to .gz-contact-faq-item (that one's dark-only, scoped to the contact
 * dossier card). Two-column accordion grid, real answers with real
 * policy/contract links, not another repeat of the same 3 questions. ===== */
.gz-faq-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; max-width: 940px; margin: 0 auto; }
.gz-faq-item{ border-bottom: 1px solid var(--gz-line); padding: 18px 0; }
.gz-faq-item summary{
  cursor: pointer; font-family: "Outfit", sans-serif; font-weight: 700; font-size: 15px;
  color: var(--gz-ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.gz-faq-item summary::-webkit-details-marker{ display: none; }
.gz-faq-item summary::after{ content: '+'; font-family: "JetBrains Mono", monospace; color: var(--gz-blue-dark); font-size: 18px; flex: none; }
.gz-faq-item[open] summary::after{ content: '\2212'; }
.gz-faq-item p{ font-size: 13.5px; color: var(--gz-muted); line-height: 1.65; margin: 10px 0 0; }
.gz-faq-item p a{ color: var(--gz-blue-dark); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px){ .gz-faq-grid{ grid-template-columns: 1fr; } }