/* =============================================================
   GRADEGUIDER — 3D HERO
   Scoped under .gg-hero / .gg-* so it cannot collide with the
   Creatino template styles used by the rest of the page.
   ============================================================= */

.gg-hero,
.gg-modal {
  --gg-green: #82a51f;
  --gg-green-dark: #6e8e16;
  --gg-green-deep: #5c7712;
  --gg-green-light: #eef5df;

  --gg-ink: #101214;
  --gg-ink-soft: #5c605b;
  --gg-ink-muted: #7a7e79;

  --gg-cream: #faf9f5;
  --gg-surface: #ffffff;

  --gg-line: rgba(36, 44, 25, 0.10);
  --gg-line-green: rgba(130, 165, 31, 0.26);

  --gg-shadow-sm: 0 5px 14px rgba(38, 45, 24, 0.05);
  --gg-shadow-md: 0 15px 40px rgba(36, 43, 25, 0.09);
  --gg-shadow-cta: 0 11px 27px rgba(112, 145, 24, 0.24);

  --gg-radius: 20px;
  --gg-container: 1680px;

  /* Driven by JS pointer tracking; 0 until the pointer moves. */
  --gg-rx: 0deg;
  --gg-ry: 0deg;
  --gg-px: 0;
  --gg-py: 0;

}

.gg-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  background: var(--gg-cream);
  font-family: "DM Sans", "Epilogue", system-ui, sans-serif;
  color: var(--gg-ink);
}

/* ---------- ambient background wash ---------- */

.gg-hero__wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 32%, rgba(180, 205, 109, 0.16), transparent 30%),
    radial-gradient(circle at 46% 72%, rgba(255, 255, 255, 0.85), transparent 36%),
    linear-gradient(168deg, #fbfaf6 0%, #f6f6ee 52%, #f2f4e7 100%);
}

.gg-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(36, 44, 25, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(36, 44, 25, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
}

/* ---------- dotted world map, full hero width ----------
   Sits behind everything and spans the whole section. --gg-px/--gg-py are
   written by hero-3d.js from the pointer, so it drifts against the artwork
   instead of sitting flat. */

.gg-hero__mapwrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.gg-hero__map {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 108%;
  min-width: 1180px;
  height: auto;
  opacity: 0.26;
  filter: saturate(0.72) brightness(1.05);
  user-select: none;
  transform:
    translate(-50%, -50%)
    translate(calc(var(--gg-px, 0) * -18px), calc(var(--gg-py, 0) * -12px));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  animation: gg-map-drift 30s ease-in-out infinite;
  will-change: transform;
}

@keyframes gg-map-drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -16px; }
}

.gg-hero__inner {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 72px), var(--gg-container));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(520px, 0.95fr) minmax(620px, 1.05fr);
  align-items: center;
  gap: 28px;
  /* The site header is position:absolute and overlays the hero, so the
     hero has to reserve its height. --gg-header-h is measured at runtime
     by hero-3d.js; the fallback keeps the layout correct without JS. */
  padding: calc(var(--gg-header-h, 124px) + 30px) 0 76px;
}

/* =============================================================
   LEFT — COPY
   ============================================================= */

.gg-hero__copy {
  position: relative;
  z-index: 5;
}

.gg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  padding: 10px 18px;
  margin: 0 0 26px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(83, 97, 55, 0.18);
  border-radius: 999px;
  box-shadow: var(--gg-shadow-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #30332f;
}

.gg-eyebrow__shield {
  position: relative;
  flex: none;
  width: 18px;
  height: 20px;
  background: var(--gg-green);
  clip-path: polygon(50% 0%, 91% 16%, 86% 72%, 50% 100%, 14% 72%, 9% 16%);
}

.gg-eyebrow__shield::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 7px;
  width: 8px;
  height: 4px;
  border-left: 1.8px solid #fff;
  border-bottom: 1.8px solid #fff;
  transform: rotate(-45deg);
}

.gg-hero__title {
  margin: 0;
  max-width: 12ch;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(46px, 4.9vw, 84px);
  line-height: 0.99;
  letter-spacing: -0.035em;
  color: var(--gg-ink);
}

/* style.css hides every <br> under 576px. The headline is a designed
   three-line lockup, so opt back in for this element only. */
.gg-hero__title br {
  display: inline;
}

.gg-hero__title .gg-accent {
  position: relative;
  color: var(--gg-green-dark);
  white-space: nowrap;
}

/* Hand-drawn underline that draws itself in. */
.gg-hero__title .gg-accent svg {
  position: absolute;
  left: 0;
  bottom: -0.14em;
  width: 100%;
  height: 0.34em;
  overflow: visible;
  pointer-events: none;
}

.gg-hero__title .gg-accent path {
  fill: none;
  stroke: rgba(130, 165, 31, 0.5);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: gg-draw 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.85s forwards;
}

@keyframes gg-draw {
  to { stroke-dashoffset: 0; }
}

.gg-hero__lede {
  max-width: 56ch;
  margin: 26px 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--gg-ink-soft);
}

/* ---------- buttons ---------- */

.gg-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.gg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 196px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s ease,
              background-color 0.24s ease,
              border-color 0.24s ease,
              color 0.24s ease;
}

.gg-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.gg-btn--primary {
  background: var(--gg-green);
  color: #fff;
  box-shadow: var(--gg-shadow-cta);
}

.gg-btn--primary:hover,
.gg-btn--primary:focus-visible {
  background: var(--gg-green-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(112, 145, 24, 0.3);
}

.gg-btn--primary:hover svg { transform: translateX(4px); }

.gg-btn--ghost {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(83, 97, 55, 0.2);
  color: #26291f;
  box-shadow: var(--gg-shadow-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.gg-btn--ghost:hover,
.gg-btn--ghost:focus-visible {
  border-color: var(--gg-line-green);
  color: #1c1f18;
  transform: translateY(-2px);
  box-shadow: var(--gg-shadow-md);
}

.gg-btn__wa {
  width: 19px;
  height: 19px;
  flex: none;
  fill: #4c8a17;
}

/* ---------- subject chips ---------- */

.gg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.gg-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--gg-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: #3a3e36;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.24s ease,
              background-color 0.24s ease,
              box-shadow 0.24s ease;
}

.gg-chip svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--gg-green-dark);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gg-chip:hover,
.gg-chip:focus-visible {
  transform: translateY(-2px);
  background: #fff;
  border-color: var(--gg-line-green);
  box-shadow: var(--gg-shadow-sm);
  color: #23261f;
}

/* ---------- trust bar ---------- */

.gg-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 34px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--gg-line);
  list-style: none;
}

.gg-trust li {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.gg-trust__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--gg-green-light);
  border: 1px solid rgba(130, 165, 31, 0.2);
}

.gg-trust__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--gg-green-deep);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gg-trust__val {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gg-ink);
  white-space: nowrap;
}

.gg-trust__lbl {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--gg-ink-muted);
}

/* =============================================================
   RIGHT — 3D STAGE
   The stage owns the perspective; .gg-stage__layers is the
   preserve-3d container that tilts. Because every layer sits at
   a different translateZ, tilting produces true parallax rather
   than a flat rotation.
   ============================================================= */

.gg-stage {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1500px;
  perspective-origin: 50% 45%;
}

.gg-stage__layers {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transform: rotateX(var(--gg-rx)) rotateY(var(--gg-ry));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* soft radial glow, sits furthest back */
.gg-stage__glow {
  position: absolute;
  right: 8%;
  bottom: 6%;
  width: 580px;
  height: 580px;
  border-radius: 50%;
  transform: translateZ(-180px);
  background: radial-gradient(circle,
    rgba(174, 204, 93, 0.22),
    rgba(174, 204, 93, 0.08) 45%,
    transparent 72%);
  filter: blur(8px);
  pointer-events: none;
}

/* orbit rings behind the artwork */
.gg-stage__ring {
  position: absolute;
  border: 1px solid rgba(130, 165, 31, 0.16);
  border-radius: 50%;
  pointer-events: none;
}

.gg-stage__ring--a {
  width: 520px;
  height: 520px;
  transform: translateZ(-70px);
  animation: gg-spin 44s linear infinite;
}

.gg-stage__ring--b {
  width: 700px;
  height: 700px;
  border-style: dashed;
  border-color: rgba(130, 165, 31, 0.1);
  transform: translateZ(-95px);
  animation: gg-spin 68s linear infinite reverse;
}

@keyframes gg-spin {
  to { transform: rotate(360deg); }
}

/* contact shadow under the artwork */
.gg-stage__shadow {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: 62%;
  height: 46px;
  transform: translate(-50%, 0) translateZ(-40px);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(40, 47, 27, 0.17), transparent 68%);
  filter: blur(14px);
  pointer-events: none;
  animation: gg-shadow-pulse 6s ease-in-out infinite;
}

@keyframes gg-shadow-pulse {
  0%, 100% { transform: translate(-50%, 0) translateZ(-40px) scale(1); opacity: 1; }
  50%      { transform: translate(-50%, 0) translateZ(-40px) scale(0.94); opacity: 0.8; }
}

/* the artwork itself */
.gg-stage__art {
  position: relative;
  z-index: 5;
  width: 112%;
  max-width: 940px;
  object-fit: contain;
  transform: translateZ(0);
  filter: drop-shadow(0 30px 26px rgba(40, 47, 27, 0.12));
  animation: gg-float 6.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes gg-float {
  0%, 100% { transform: translateZ(0) translateY(10px); }
  50%      { transform: translateZ(0) translateY(-8px); }
}

/* forward-depth accents — these pop toward the viewer */
.gg-stage__spark {
  position: absolute;
  border-radius: 50%;
  background: var(--gg-green);
  pointer-events: none;
}

.gg-stage__spark--1 {
  width: 7px; height: 7px;
  top: 16%; right: 5%;
  opacity: 0.3;
  transform: translateZ(120px);
  animation: gg-bob 5s ease-in-out infinite;
}

.gg-stage__spark--2 {
  width: 5px; height: 5px;
  top: 31%; left: 9%;
  opacity: 0.35;
  transform: translateZ(150px);
  animation: gg-bob 7s ease-in-out infinite 0.6s;
}

.gg-stage__spark--3 {
  width: 9px; height: 9px;
  bottom: 20%; left: 3%;
  opacity: 0.22;
  transform: translateZ(90px);
  animation: gg-bob 6.2s ease-in-out infinite 1.2s;
}

@keyframes gg-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -13px; }
}

/* Parked = hero is off screen. Nothing here is visible, so stop
   animating it and drop the promoted layers. */
.gg-hero.gg-parked .gg-stage__art,
.gg-hero.gg-parked .gg-stage__ring,
.gg-hero.gg-parked .gg-stage__shadow,
.gg-hero.gg-parked .gg-stage__spark,
.gg-hero.gg-parked .gg-hero__map {
  animation-play-state: paused !important;
}

.gg-hero.gg-parked .gg-stage__art,
.gg-hero.gg-parked .gg-stage__layers,
.gg-hero.gg-parked .gg-hero__map {
  will-change: auto;
}

/* =============================================================
   ENTRANCE
   ============================================================= */

/* Content is visible by default. The entrance only runs once JS has
   confirmed it is safe to animate (.gg-animate on the hero), so a slow
   network, a CSS/JS failure or a stalled animation can never leave the
   headline invisible - the worst case is that it simply appears. */
.gg-reveal {
  opacity: 1;
  transform: none;
}

.gg-hero.gg-animate .gg-reveal {
  opacity: 0;
  transform: translateY(22px);
  animation: gg-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.gg-hero.gg-animate .gg-reveal[data-d="1"] { animation-delay: 0.05s; }
.gg-hero.gg-animate .gg-reveal[data-d="2"] { animation-delay: 0.15s; }
.gg-hero.gg-animate .gg-reveal[data-d="3"] { animation-delay: 0.25s; }
.gg-hero.gg-animate .gg-reveal[data-d="4"] { animation-delay: 0.35s; }
.gg-hero.gg-animate .gg-reveal[data-d="5"] { animation-delay: 0.45s; }
.gg-hero.gg-animate .gg-reveal[data-d="6"] { animation-delay: 0.55s; }

@keyframes gg-rise {
  to { opacity: 1; transform: translateY(0); }
}

.gg-hero.gg-animate .gg-stage {
  opacity: 0;
  animation: gg-stage-in 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

@keyframes gg-stage-in {
  from { opacity: 0; transform: perspective(1500px) rotateX(7deg) translateY(38px) scale(0.965); }
  to   { opacity: 1; transform: perspective(1500px) rotateX(0deg) translateY(0) scale(1); }
}

/* =============================================================
   QUOTE MODAL — keeps the original lead-capture form reachable
   ============================================================= */

.gg-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(16, 20, 12, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gg-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.gg-modal__panel {
  position: relative;
  width: min(100%, 460px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 34px 32px 30px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 40px 90px rgba(20, 26, 12, 0.32);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: "DM Sans", "Epilogue", system-ui, sans-serif;
}

.gg-modal.is-open .gg-modal__panel {
  transform: translateY(0) scale(1);
}

.gg-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gg-line, rgba(36, 44, 25, 0.1));
  border-radius: 50%;
  background: #fff;
  color: #3a3e36;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.gg-modal__close:hover {
  background: #f2f4e7;
  transform: rotate(90deg);
}

.gg-modal__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin-bottom: 14px;
  background: #eef5df;
  border: 1px solid rgba(130, 165, 31, 0.26);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5c7712;
}

.gg-modal__title {
  margin: 0 0 6px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #101214;
}

.gg-modal__sub {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.6;
  color: #6b6f68;
}

.gg-field { margin-bottom: 13px; }

.gg-field input,
.gg-field textarea {
  width: 100%;
  padding: 13px 16px;
  font: inherit;
  font-size: 14.5px;
  color: #101214;
  background: #faf9f5;
  border: 1px solid rgba(36, 44, 25, 0.13);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.gg-field textarea { resize: vertical; min-height: 104px; }

.gg-field input::placeholder,
.gg-field textarea::placeholder { color: #9a9e95; }

.gg-field input:focus,
.gg-field textarea:focus {
  background: #fff;
  border-color: rgba(130, 165, 31, 0.55);
  box-shadow: 0 0 0 4px rgba(130, 165, 31, 0.13);
}

.gg-modal .gg-btn { width: 100%; margin-top: 6px; }

body.gg-modal-open { overflow: hidden; }

/* The pricing section's "Create an order" CTA was a dead href="#".
   It is now a <button> that opens the quote modal, so it needs the
   button chrome stripped back to what the anchor had. */
button.create-order-btn {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 1250px) {
  .gg-hero__inner {
    width: calc(100% - 48px);
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .gg-stage { min-height: 620px; }
  .gg-stage__art { width: 118%; }
  .gg-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
}

@media (max-width: 991px) {
  .gg-hero__inner {
    grid-template-columns: 1fr;
    padding: calc(var(--gg-header-h, 190px) + 26px) 0 56px;
    gap: 8px;
  }
  .gg-hero__copy { order: 1; text-align: center; }
  .gg-stage { order: 2; min-height: 480px; margin-top: 8px; }
  .gg-eyebrow { margin-left: auto; margin-right: auto; }
  .gg-hero__title { max-width: none; }
  .gg-hero__lede { margin-left: auto; margin-right: auto; }
  .gg-hero__actions,
  .gg-chips { justify-content: center; }
  .gg-trust { text-align: left; }
  .gg-stage__art { width: 100%; max-width: 680px; }
  .gg-hero__map { width: 150%; min-width: 900px; opacity: 0.2; }
  .gg-stage__ring--a { width: 400px; height: 400px; }
  .gg-stage__ring--b { width: 520px; height: 520px; }
}

@media (max-width: 700px) {
  .gg-hero__inner { width: calc(100% - 36px); padding: calc(var(--gg-header-h, 20px) + 96px) 0 46px; }
  .gg-hero__title { font-size: clamp(36px, 9.4vw, 52px); letter-spacing: -0.028em; }
  .gg-hero__lede { font-size: 15px; }
  .gg-btn { min-width: 0; flex: 1 1 100%; }
  .gg-stage { min-height: 360px; }
  .gg-trust { grid-template-columns: 1fr; gap: 15px; }
  .gg-stage__ring { display: none; }
  .gg-modal__panel { padding: 30px 22px 26px; border-radius: 20px; }
}

/* =============================================================
   MOTION SAFETY
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  .gg-hero *,
  .gg-hero *::before,
  .gg-hero *::after,
  .gg-modal,
  .gg-modal__panel {
    animation: none !important;
    transition: none !important;
  }
  .gg-reveal { opacity: 1; transform: none; }
  .gg-stage { opacity: 1; transform: none; }
  .gg-stage__layers { transform: none; }
  .gg-hero__title .gg-accent path { stroke-dashoffset: 0; }
}