/* ==========================================================================
   Good Company — mygoodco.com
   Ported from the approved design (Good Company Site v2.dc.html).
   Values here are lifted verbatim from that file; treat them as the spec.
   ========================================================================== */

:root {
  --ink: #14122e;
  --violet: #5b3df5;
  --violet-lite: #8b5cff;
  --blue: #3d6dff;
  --rose: #ff6a9c;

  --ink-72: rgba(20, 18, 46, 0.72);
  --ink-66: rgba(20, 18, 46, 0.66);
  --ink-64: rgba(20, 18, 46, 0.64);
  --ink-62: rgba(20, 18, 46, 0.62);
  --ink-60: rgba(20, 18, 46, 0.6);
  --ink-55: rgba(20, 18, 46, 0.55);
  --ink-45: rgba(20, 18, 46, 0.45);
  --ink-35: rgba(20, 18, 46, 0.35);
  --ink-12: rgba(20, 18, 46, 0.12);
  --ink-10: rgba(20, 18, 46, 0.1);
  --ink-08: rgba(20, 18, 46, 0.08);
  --ink-07: rgba(20, 18, 46, 0.07);
  --ink-05: rgba(20, 18, 46, 0.05);

  --shell: 1500px;
  --gutter: 6vw;

  --font-head: Sora, system-ui, sans-serif;
  --font-body: Figtree, system-ui, sans-serif;

  /* The glass recipe, shared by every panel in the design. */
  --glass-fill: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.68) 0%,
    rgba(255, 255, 255, 0.26) 34%,
    rgba(255, 255, 255, 0.07) 62%,
    rgba(255, 255, 255, 0.32) 100%
  );
  --glass-edge: 1px solid rgba(255, 255, 255, 0.85);
  --glass-blur: blur(26px) saturate(160%);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(20, 18, 46, 0.05),
    0 0 0 1px rgba(20, 18, 46, 0.05);

  /* The violet→blue→rose wash used on CTA panels. */
  --accent-fill: linear-gradient(
      140deg,
      rgba(139, 92, 255, 0.24),
      rgba(61, 109, 255, 0.16) 55%,
      rgba(255, 106, 156, 0.14)
    ),
    rgba(255, 255, 255, 0.6);

  --grad-btn: linear-gradient(135deg, #8b5cff, #4d63ff 60%, #2f7bff);
  --grad-text: linear-gradient(115deg, #14122e 8%, #6a4bff 48%, #2f7bff 86%);
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --------------------------------------------------------------- base --- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: #ffffff;
}

body {
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: var(--violet);
}

a:hover {
  color: #3c22cc;
}

/* An <img> with width/height attributes applies them as presentational
   hints, so a rule setting only `width` leaves the attribute height in
   force and stretches the picture. Defaulting height to auto keeps the
   intrinsic ratio; rules that set both still win. */
img {
  height: auto;
}

input,
textarea,
button {
  font-family: var(--font-body);
}

input::placeholder,
textarea::placeholder {
  color: rgba(20, 18, 46, 0.34);
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(91, 61, 245, 0.7);
  outline-offset: 3px;
}

::selection {
  background: rgba(139, 92, 255, 0.24);
}

::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: #ffffff;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(#8b5cff, #3d6dff);
  border-radius: 99px;
}

@keyframes gcBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.gc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 0 0 14px 0;
  background: #ffffff;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.gc-skip:focus {
  left: 0;
}

/* -------------------------------------------------------------- shell --- */

.gc-page {
  position: relative;
  min-height: 100vh;
  background: #ffffff;
}

/* The single background glow: pinned top-centre, bottom half showing,
   pushed up the y axis as the cursor nears the top of the viewport. */
.gc-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.gc-glow {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1000px;
  height: 1000px;
  margin: -500px 0 0 -500px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(139, 92, 255, 0.4),
    rgba(139, 92, 255, 0.1) 45%,
    rgba(139, 92, 255, 0) 70%
  );
  filter: blur(48px);
  will-change: translate;
}

.gc-bg-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(135% 100% at 50% 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.66) 100%);
}

.gc-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #8b5cff, #3d6dff, #ff6a9c);
  z-index: 120;
  border-radius: 0 99px 99px 0;
}

.gc-main {
  position: relative;
  z-index: 2;
}

.gc-shell {
  max-width: var(--shell);
  margin: 0 auto;
}

/* ---------------------------------------------------------------- nav --- */

/* height:0 wrapper so the pill floats over the hero rather than occupying
   layout space. The prototype pinned this per-frame with JS because the design
   tool rendered the page inside a transformed, separately-scrolled container,
   which breaks both `fixed` and `sticky`. No such ancestor exists here, so
   plain `fixed` gives the same result — docked 18px from the top, centred on
   the page — without a measurement loop. */
.gc-nav-wrap {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 110;
  height: 0;
  padding: 0 16px;
  pointer-events: none;
}

.gc-nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0 auto;
  gap: 8px;
  padding: 9px 10px 9px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.7) 45%,
    rgba(255, 255, 255, 0.62) 70%,
    rgba(255, 255, 255, 0.8) 100%
  );
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  box-shadow: 0 14px 40px rgba(60, 40, 150, 0.18), 0 2px 8px rgba(20, 18, 46, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(20, 18, 46, 0.06),
    0 0 0 1px rgba(20, 18, 46, 0.1);
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.gc-nav::-webkit-scrollbar {
  display: none;
}

.gc-nav-logo {
  display: flex;
  align-items: center;
  margin-right: 14px;
  text-decoration: none;
  flex: none;
}

.gc-nav-logo img {
  height: 20px;
  width: auto;
}

.gc-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.gc-nav-links a {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink-62);
  background: transparent;
  transition: background 0.3s ease, color 0.3s ease;
}

.gc-nav-links a:hover {
  background: rgba(91, 61, 245, 0.09);
  color: var(--ink);
}

.gc-nav-links a[aria-current='page'] {
  color: var(--ink);
  background: rgba(91, 61, 245, 0.12);
}

.gc-nav-cta {
  flex: none;
  margin-left: 10px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--grad-btn);
  box-shadow: 0 10px 30px rgba(110, 80, 255, 0.36);
  transition: box-shadow 0.3s ease;
}

.gc-nav-cta:hover {
  color: #ffffff;
  box-shadow: 0 16px 40px rgba(110, 80, 255, 0.5);
}

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

.gc-btn {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  transition: box-shadow 0.35s ease;
}

.gc-btn-primary {
  color: #ffffff;
  padding: 17px 32px;
  background: var(--grad-btn);
  box-shadow: 0 18px 44px rgba(110, 80, 255, 0.36);
}

.gc-btn-primary:hover {
  color: #ffffff;
  box-shadow: 0 26px 60px rgba(110, 80, 255, 0.5);
}

.gc-btn-ghost {
  color: var(--ink);
  padding: 17px 30px;
  border: 1px solid var(--ink-10);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 34px rgba(60, 40, 150, 0.12);
}

.gc-btn-ghost:hover {
  color: var(--ink);
  box-shadow: 0 22px 50px rgba(60, 40, 150, 0.2);
}

/* -------------------------------------------------------------- glass --- */

.gc-glass {
  position: relative;
  overflow: hidden;
  border: var(--glass-edge);
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 24px 60px rgba(60, 40, 150, 0.13), var(--glass-inset);
}

.gc-accent-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ink-07);
  background: var(--accent-fill);
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  box-shadow: 0 40px 120px rgba(60, 40, 150, 0.2), var(--glass-inset);
}

/* Pill badge above a page title. */
.gc-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--ink-08);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(60, 40, 150, 0.1);
  font-size: 13.5px;
  color: rgba(20, 18, 46, 0.7);
}

.gc-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #17c98f;
  box-shadow: 0 0 12px rgba(23, 201, 143, 0.9);
}

.gc-grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ----------------------------------------------------- motion classes --- */

[data-reveal] {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  filter: blur(12px);
  transition: opacity 0.9s ease, transform 0.9s var(--ease-out), filter 0.9s ease;
}

[data-reveal].is-shown {
  opacity: 1;
  transform: none;
  filter: none;
}

[data-tilt] {
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
}

/* A card that both reveals and tilts needs the tilt transform to win once
   revealed, so the reveal transition is dropped at that point. */
[data-reveal][data-tilt].is-shown {
  transition: opacity 0.9s ease, transform 0.4s var(--ease-out), box-shadow 0.4s ease, filter 0.9s ease;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .gc-glow,
  [data-tilt],
  [data-magnet] {
    transition: none !important;
  }
}

/* ================================================================ HOME === */

.gc-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 150px var(--gutter) 90px;
}

.gc-hero .gc-badge {
  align-self: flex-start;
  margin-bottom: 34px;
  padding: 8px 16px 8px 10px;
  color: var(--ink-72);
}

.gc-hero h1 {
  margin: 0;
  max-width: 17ch;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(48px, 8.2vw, 132px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.gc-hero-intro {
  max-width: 54ch;
  margin: 34px 0 0;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.62;
  color: var(--ink-66);
}

.gc-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 42px;
  flex-wrap: wrap;
}

.gc-hero-cards {
  display: flex;
  gap: 14px;
  margin-top: 84px;
  flex-wrap: wrap;
}

.gc-hero-card {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 26px 26px;
  border-radius: 26px;
}

.gc-hero-card:hover {
  box-shadow: 0 34px 80px rgba(60, 40, 150, 0.22), var(--glass-inset);
}

.gc-hero-card-n {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--violet);
}

.gc-hero-card-name {
  font-family: var(--font-head);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.gc-hero-card-line {
  font-size: 14.5px;
  color: var(--ink-62);
}

/* Section intro: title left, supporting paragraph right. */
.gc-intro-row {
  padding: 60px var(--gutter) 40px;
}

.gc-intro-row > div {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.gc-intro-row h2 {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.gc-intro-row p {
  max-width: 38ch;
  margin: 0;
  font-size: 16.5px;
  color: var(--ink-62);
}

/* Three big service cards on home. */
.gc-services {
  padding: 20px var(--gutter) 80px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.gc-service-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  padding: 40px 42px;
  border-radius: 34px;
  text-decoration: none;
  color: var(--ink);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: 0 30px 70px rgba(60, 40, 150, 0.14), var(--glass-inset);
}

.gc-service-card:hover {
  color: var(--ink);
  box-shadow: 0 46px 110px rgba(60, 40, 150, 0.24), var(--glass-inset);
}

.gc-service-card-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gc-service-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gc-service-num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #8b5cff, #3d6dff);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(110, 80, 255, 0.35);
}

.gc-service-card h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1;
  letter-spacing: -0.035em;
}

.gc-service-card-blurb {
  max-width: 42ch;
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-66);
}

.gc-service-card-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--violet);
}

.gc-pills {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 9px;
}

.gc-pill {
  padding: 10px 17px;
  border-radius: 999px;
  border: 1px solid var(--ink-10);
  background: rgba(255, 255, 255, 0.72);
  font-size: 14.5px;
  color: rgba(20, 18, 46, 0.82);
}

/* Framed image blocks. */
.gc-frame {
  position: relative;
  overflow: hidden;
  padding: 12px;
  border-radius: 36px;
  border: var(--glass-edge);
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 30px 80px rgba(60, 40, 150, 0.16), var(--glass-inset);
  transition: transform 0.4s var(--ease-out);
}

.gc-media {
  padding: 0 var(--gutter) 40px;
}

.gc-note {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--ink-45);
}

/* Process list with the scroll-driven light trail. */
.gc-process {
  position: relative;
  padding: 40px var(--gutter) 120px;
}

.gc-process-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 54px;
}

.gc-process-head h2 {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.gc-process-head p {
  margin: 0;
  font-size: 16.5px;
  color: var(--ink-60);
}

/* The brand infinity mark beside "How we work". Both dimensions are set, so
   the attribute height cannot fight a CSS-only width and stretch it; the glyph
   is 755x404, so object-fit keeps it undistorted inside the 55x50 box. */
.gc-infinity {
  width: 55px;
  height: 50px;
  display: block;
  object-fit: contain;
}

.gc-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gc-track {
  position: absolute;
  left: 27px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--ink-10);
  border-radius: 99px;
}

.gc-track-fill {
  position: absolute;
  left: 27px;
  top: 24px;
  width: 2px;
  height: 0;
  background: linear-gradient(#8b5cff, #3d6dff);
  border-radius: 99px;
  box-shadow: 0 0 18px rgba(139, 92, 255, 0.6);
}

.gc-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 26px;
  align-items: start;
  padding: 26px 30px 26px 0;
  border-radius: 28px;
}

.gc-step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--ink-08);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 30px rgba(60, 40, 150, 0.14);
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--violet);
}

.gc-step h4 {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(21px, 2.2vw, 30px);
  letter-spacing: -0.025em;
}

.gc-step p {
  max-width: 62ch;
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-62);
}

/* Closing CTA panel. */
.gc-cta-section {
  padding: 0 var(--gutter) 130px;
}

.gc-cta-panel {
  padding: clamp(48px, 6vw, 96px);
  border-radius: 40px;
}

.gc-cta-panel h2 {
  position: relative;
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(36px, 5.6vw, 84px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.gc-cta-panel .gc-btn {
  position: relative;
  margin-top: 40px;
  padding: 18px 34px;
  box-shadow: 0 20px 50px rgba(110, 80, 255, 0.38);
}

.gc-cta-panel .gc-btn:hover {
  box-shadow: 0 28px 66px rgba(110, 80, 255, 0.5);
}

/* ============================================================= SERVICE === */

.gc-page-hero {
  padding: 170px var(--gutter) 70px;
}

.gc-page-hero .gc-badge {
  margin-bottom: 30px;
}

.gc-page-hero h1 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(52px, 9vw, 148px);
  line-height: 0.94;
  letter-spacing: -0.05em;
}

.gc-page-hero-lead {
  max-width: 58ch;
  margin: 30px 0 0;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.6;
  color: var(--ink-66);
}

.gc-rows {
  padding: 20px var(--gutter) 60px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gc-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px 34px;
  border-radius: 26px;
  box-shadow: 0 22px 60px rgba(60, 40, 150, 0.13), var(--glass-inset);
}

.gc-row:hover {
  box-shadow: 0 36px 90px rgba(60, 40, 150, 0.22), var(--glass-inset);
}

.gc-row-i {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--violet);
  min-width: 28px;
}

.gc-row-label {
  font-family: var(--font-head);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.gc-block {
  padding: 40px var(--gutter) 60px;
}

.gc-block-title {
  margin: 0 0 34px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 54px);
  letter-spacing: -0.04em;
}

.gc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.gc-info-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 30px 34px;
  border-radius: 30px;
  box-shadow: 0 26px 66px rgba(60, 40, 150, 0.13), var(--glass-inset);
}

.gc-info-card h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.025em;
}

.gc-info-card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-64);
}

.gc-media-pair {
  padding: 20px var(--gutter) 40px;
}

.gc-media-pair-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
}

/* One photo left: the owner's width setting on the slot decides how wide it
   is (Full, Wide, Half…), so the track is the whole row. It used to be capped
   at 720px here, which silently overrode "Full width". */
.gc-media-pair-grid.is-single {
  grid-template-columns: 1fr;
}

.gc-media-pair .gc-frame {
  border-radius: 34px;
  box-shadow: 0 26px 70px rgba(60, 40, 150, 0.15), var(--glass-inset);
}

.gc-service-cta {
  padding: 40px var(--gutter) 130px;
}

.gc-service-cta .gc-accent-panel {
  padding: clamp(44px, 5.4vw, 86px);
  border-radius: 40px;
}

.gc-service-cta h2 {
  margin: 0;
  max-width: 26ch;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.gc-cta-actions {
  display: flex;
  gap: 12px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.gc-cta-actions .gc-btn-primary {
  padding: 17px 30px;
}

.gc-cta-actions .gc-btn-ghost {
  border-color: var(--ink-12);
}

/* =============================================================== ABOUT === */

.gc-about-hero {
  padding: 170px var(--gutter) 60px;
}

.gc-about-hero h1 {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(44px, 7vw, 112px);
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.gc-about-intro {
  max-width: 62ch;
  margin: 30px 0 0;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.62;
  color: var(--ink-66);
}

.gc-stats {
  padding: 30px var(--gutter) 60px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}

.gc-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 28px 32px;
  border-radius: 28px;
}

.gc-stat-value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(120deg, #14122e, #6a4bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gc-stat-label {
  font-size: 14.5px;
  color: var(--ink-60);
}

.gc-about-media {
  padding: 20px var(--gutter) 40px;
}

.gc-about-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}

.gc-about-media .gc-frame {
  padding: 10px;
  border-radius: 30px;
  box-shadow: 0 26px 70px rgba(60, 40, 150, 0.15), var(--glass-inset);
}

.gc-belief-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.gc-belief-n {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--violet);
}

.gc-belief h4 {
  font-size: 23px;
}

.gc-quotes {
  padding: 40px var(--gutter) 60px;
}

.gc-quote {
  position: relative;
  overflow: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px 34px;
  border-radius: 32px;
  border: 1px solid var(--ink-07);
  background: linear-gradient(150deg, rgba(139, 92, 255, 0.16), rgba(255, 255, 255, 0.6));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 26px 66px rgba(60, 40, 150, 0.14), var(--glass-inset);
}

.gc-quote p {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.gc-quote footer {
  font-size: 14px;
  color: var(--ink-55);
}

.gc-about-cta {
  padding: 40px var(--gutter) 130px;
}

.gc-about-cta .gc-accent-panel {
  padding: clamp(44px, 5.4vw, 86px);
  border-radius: 40px;
}

.gc-about-cta h2 {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(32px, 4.8vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.gc-about-cta .gc-btn {
  margin-top: 36px;
}

/* ============================================================= CONTACT === */

.gc-contact {
  padding: 160px var(--gutter) 120px;
}

.gc-contact-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 26px;
  align-items: start;
}

.gc-contact-form-panel {
  padding: clamp(34px, 3.4vw, 54px);
  border-radius: 36px;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.3) 34%,
    rgba(255, 255, 255, 0.1) 62%,
    rgba(255, 255, 255, 0.36) 100%
  );
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: 0 30px 80px rgba(60, 40, 150, 0.16), var(--glass-inset);
}

.gc-contact-form-panel h1 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.gc-contact-intro {
  max-width: 46ch;
  margin: 18px 0 34px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-64);
}

.gc-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.gc-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.gc-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-60);
}

.gc-field input,
.gc-field textarea {
  width: 100%;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid var(--ink-12);
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
  font-size: 15.5px;
}

.gc-field textarea {
  min-height: 110px;
  resize: vertical;
  border-radius: 18px;
  line-height: 1.55;
}

.gc-field-label {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--ink-60);
}

.gc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

/* Chips are real checkboxes/radios behind a styled label, so the form works
   and stays keyboard-navigable with JavaScript disabled. */
.gc-chip-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.gc-chip {
  display: inline-block;
  cursor: pointer;
  user-select: none;
  font-size: 14.5px;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--ink-12);
  background: rgba(255, 255, 255, 0.78);
  color: rgba(20, 18, 46, 0.82);
  box-shadow: none;
  transition: transform 0.25s ease, background 0.25s ease;
}

.gc-chip:hover {
  transform: translateY(-2px);
}

.gc-chip-input:checked + .gc-chip {
  border-color: transparent;
  background: var(--grad-btn);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(110, 80, 255, 0.34);
}

.gc-chip-input:focus-visible + .gc-chip {
  outline: 2px solid rgba(91, 61, 245, 0.7);
  outline-offset: 3px;
}

.gc-form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.gc-form-actions .gc-btn-primary {
  padding: 16px 30px;
}

.gc-form-hint {
  font-size: 14.5px;
  color: var(--ink-55);
}

.gc-form-error {
  margin: 0;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid rgba(214, 43, 90, 0.28);
  background: rgba(255, 106, 156, 0.1);
  font-size: 14.5px;
  color: #b3204d;
}

/* The live brief panel. */
.gc-brief {
  position: sticky;
  top: 110px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(30px, 3vw, 44px);
  border-radius: 36px;
  border: 1px solid var(--ink-07);
  background: linear-gradient(160deg, rgba(139, 92, 255, 0.2), rgba(61, 109, 255, 0.12) 55%, rgba(255, 255, 255, 0.6));
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  box-shadow: 0 34px 90px rgba(60, 40, 150, 0.2), var(--glass-inset);
}

.gc-brief-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--ink-60);
}

.gc-brief-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--ink-10);
  overflow: hidden;
}

.gc-brief-bar span {
  display: block;
  height: 6px;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #8b5cff, #3d6dff, #ff6a9c);
  box-shadow: 0 0 18px rgba(139, 92, 255, 0.6);
  transition: width 0.5s var(--ease-out);
}

.gc-brief-line {
  margin: 6px 0 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.32;
  letter-spacing: -0.025em;
}

.gc-brief-rows {
  display: flex;
  flex-direction: column;
}

.gc-brief-row {
  display: flex;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--ink-10);
  font-size: 14.5px;
}

.gc-brief-row dt {
  color: var(--ink-45);
  min-width: 96px;
  margin: 0;
}

.gc-brief-row dd {
  margin: 0;
  color: var(--ink-35);
}

.gc-brief-row dd.is-set {
  color: var(--ink);
}

.gc-brief-row dd.is-accent {
  color: var(--violet);
}

.gc-brief-status {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--ink-45);
}

.gc-brief-caret {
  animation: gcBlink 1.1s step-end infinite;
}

.gc-brief-media {
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--ink-07);
}

.gc-contact-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}

.gc-contact-foot span {
  font-size: 14.5px;
  color: rgba(20, 18, 46, 0.5);
}

/* ============================================================== FOOTER === */

.gc-footer {
  padding: 0 var(--gutter) 40px;
}

.gc-footer-inner {
  padding: 44px clamp(30px, 3.4vw, 54px) 30px;
  border-radius: 36px 36px 0 0;
  border: var(--glass-edge);
  border-bottom: 0;
  background: var(--glass-fill);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  box-shadow: 0 -10px 60px rgba(60, 40, 150, 0.08);
}

.gc-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 44px;
  flex-wrap: wrap;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--ink-10);
}

.gc-footer-logo {
  height: 38px;
  width: auto;
}

.gc-footer-cols {
  display: flex;
  gap: 62px;
  flex-wrap: wrap;
}

.gc-footer-col {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.gc-footer-col-label {
  font-size: 13.5px;
  color: var(--ink-45);
}

.gc-footer-col a {
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
}

.gc-footer-col a:hover {
  color: var(--violet);
}

.gc-footer-col a.gc-footer-mail {
  color: var(--violet);
}

.gc-footer-col span:not(.gc-footer-col-label) {
  font-size: 15px;
  color: var(--ink-55);
}

.gc-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;
  font-size: 13.5px;
  color: rgba(20, 18, 46, 0.42);
  flex-wrap: wrap;
}

/* ======================================================== image slots === */

.gc-slot {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(139, 92, 255, 0.08), rgba(61, 109, 255, 0.06));
}

/* A slot never grows taller than most of the screen. Width is the owner's
   call ("Full", "Wide"…), but a lone portrait at full width on a desktop is
   1.7 screens tall, so the height gives way instead and the picture crops to
   fit (object-fit: cover below). Landscape shapes at any width, and every
   phone layout, sit well under this and are untouched. */
.gc-slot { max-height: 85vh; }

.gc-slot img,
.gc-slot video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* An embed is the provider's own player, so it fills the frame rather than
   being cropped to it. */
.gc-slot iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Per-slot size and alignment, set by the owner. Everything stays inside the
   page wrapper — these only ever narrow a slot within its existing column. */
.gc-slot.is-w-full { max-width: 100%; }
.gc-slot.is-w-wide { max-width: 80%; }
.gc-slot.is-w-half { max-width: 50%; }
.gc-slot.is-w-third { max-width: 33.333%; }

.gc-slot.is-a-left { margin-right: auto; }
.gc-slot.is-a-center { margin-left: auto; margin-right: auto; }
.gc-slot.is-a-right { margin-left: auto; }

.gc-slot-empty {
  display: grid;
  place-items: center;
  padding: 24px;
  border: 1px dashed rgba(20, 18, 46, 0.16);
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-45);
}

.gc-slot-r26 { border-radius: 26px; }
.gc-slot-r24 { border-radius: 24px; }
.gc-slot-r22 { border-radius: 22px; }

/* Nav entries the owner has hidden at one size. 760px is the breakpoint the
   rest of the sheet already uses for the phone layout. */
@media (min-width: 761px) {
  .gc-hide-desktop { display: none !important; }
}

@media (max-width: 760px) {
  .gc-hide-mobile { display: none !important; }
}

/* ========================================================= responsive === */

@media (max-width: 1000px) {
  .gc-service-card {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 34px 30px;
  }

  .gc-media-pair-grid,
  .gc-contact-grid {
    grid-template-columns: 1fr;
  }

  .gc-brief {
    position: static;
  }

  .gc-about-media-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  :root {
    --gutter: 22px;
  }

  .gc-hero {
    padding: 128px var(--gutter) 70px;
    min-height: auto;
  }

  .gc-page-hero,
  .gc-about-hero {
    padding-top: 132px;
  }

  .gc-contact {
    padding-top: 128px;
  }

  .gc-about-media-grid {
    grid-template-columns: 1fr;
  }

  .gc-field-row {
    grid-template-columns: 1fr;
  }

  .gc-process-head {
    margin-bottom: 34px;
  }

  .gc-hero-cards {
    margin-top: 54px;
  }

  .gc-footer-cols {
    gap: 32px;
  }

  /* The tilt/magnet effects are pointer-only; keep touch layouts flat. */
  [data-tilt],
  [data-magnet] {
    transform: none !important;
    translate: none !important;
  }
}

/* ============================================================ blocks === */
/* Sections built in the admin or in place. They reuse the designed
   primitives (glass cards, accent panel, frame) and only add the grid and
   spacing glue they need. Nested blocks inside a column drop the section
   padding so the column's own gutter is the only one. */

.gc-blk { padding: 40px var(--gutter); }
.gc-column > .gc-blk { padding: 0; }
.gc-column > .gc-blk + .gc-blk { margin-top: 28px; }

.gc-blk.is-center { text-align: center; }
.gc-blk.is-center .gc-blk-prose,
.gc-blk.is-center .gc-blk-title,
.gc-blk.is-center .gc-blk-lead { margin-left: auto; margin-right: auto; }

.gc-blk-title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.gc-blk-title.is-h1 { font-size: clamp(44px, 7vw, 104px); letter-spacing: -0.045em; line-height: 0.98; max-width: 17ch; }
.gc-blk-title.is-h2 { font-size: clamp(34px, 4.4vw, 66px); }
.gc-blk-title.is-h3 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.02em; }

.gc-blk-lead {
  max-width: 54ch;
  margin: 22px 0 0;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.62;
  color: var(--ink-66);
}

.gc-blk-prose { max-width: 66ch; font-size: 17px; line-height: 1.7; color: var(--ink-72); }
.gc-blk-prose p { margin: 0 0 1.1em; }
.gc-blk-prose p:last-child { margin-bottom: 0; }
.gc-blk-text.is-lead .gc-blk-prose { font-size: clamp(18px, 1.6vw, 22px); color: var(--ink-66); }

.gc-blk-label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.gc-blk-caption { margin: 14px 0 0; font-size: 14px; color: var(--ink-45); text-align: center; }

.gc-blk-media .gc-frame { margin-left: auto; margin-right: auto; }
.gc-blk-media .gc-frame.is-a-left { margin-left: 0; }
.gc-blk-media .gc-frame.is-a-right { margin-right: 0; }
.gc-blk-media .gc-frame.is-w-wide { max-width: 80%; }
.gc-blk-media .gc-frame.is-w-half { max-width: 50%; }
.gc-blk-media .gc-frame.is-w-third { max-width: 33.333%; }
.gc-blk-media .is-w-wide > .gc-slot,
.gc-blk-media .is-w-half > .gc-slot,
.gc-blk-media .is-w-third > .gc-slot { max-width: 100%; }

.gc-blk-media-empty {
  display: grid;
  place-items: center;
  min-height: 180px;
  border: 1px dashed rgba(91, 61, 245, 0.4);
  border-radius: 24px;
  color: var(--violet);
  font-size: 14px;
  cursor: pointer;
}

/* Card grid column counts. The designed .gc-card-grid stays auto-fit; these
   pin an explicit count when the owner picks one. */
.gc-card-grid.is-cols-1 { grid-template-columns: 1fr; }
.gc-card-grid.is-cols-2 { grid-template-columns: repeat(2, 1fr); }
.gc-card-grid.is-cols-3 { grid-template-columns: repeat(3, 1fr); }
.gc-card-grid.is-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Owner-made columns. */
.gc-columns { display: grid; gap: 32px; }
.gc-columns.is-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gc-columns.is-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gc-columns.is-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gc-columns.is-gap-s { gap: 16px; }
.gc-columns.is-gap-l { gap: 56px; }
.gc-columns.is-v-center { align-items: center; }
.gc-columns.is-v-bottom { align-items: end; }
.gc-column { min-width: 0; }

.gc-blk-spacer.is-size-s { height: 24px; padding: 0; }
.gc-blk-spacer.is-size-m { height: 64px; padding: 0; }
.gc-blk-spacer.is-size-l { height: 120px; padding: 0; }

/* Custom page layouts. */
.gc-page-narrow .gc-blk { max-width: 860px; margin-left: auto; margin-right: auto; }
.gc-page-wide { --gutter: 3vw; }
.gc-custom-page { padding-top: 150px; }

@media (max-width: 1000px) {
  .gc-card-grid.is-cols-3,
  .gc-card-grid.is-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .gc-columns.is-cols-3,
  .gc-columns.is-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .gc-blk { padding: 28px var(--gutter); }
  .gc-card-grid.is-cols-2,
  .gc-card-grid.is-cols-3,
  .gc-card-grid.is-cols-4 { grid-template-columns: 1fr; }
  .gc-columns.is-cols-2,
  .gc-columns.is-cols-3,
  .gc-columns.is-cols-4 { grid-template-columns: 1fr; }
  .gc-blk-media .gc-frame.is-w-wide,
  .gc-blk-media .gc-frame.is-w-half,
  .gc-blk-media .gc-frame.is-w-third { max-width: 100%; }
  .gc-custom-page { padding-top: 128px; }
}

/* brief: custom questions */
.gc-field select {
  width: 100%;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid var(--ink-12);
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
  font-size: 15.5px;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-60) 50%),
                    linear-gradient(135deg, var(--ink-60) 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 18px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.gc-field-required {
  margin-left: 8px;
  font-size: 12.5px;
  color: var(--ink-55);
}

/* ============================================= page body + sections === */
/* The designed opening sections carry their own clearance under the fixed
   nav. Anything else that ends up first on a page — an owner block, or a
   designed section after the opening was moved or removed — gets it here. */
.gc-page-body > .gc-blk:first-child { padding-top: 150px; }
.gc-page-body > .gc-sec:first-child > section:not(.gc-hero):not(.gc-about-hero):not(.gc-page-hero),
.gc-page-body > .gc-sec:first-child > div:not(.gc-contact) { padding-top: 150px; }
.gc-custom-page { padding-top: 0; }

@media (max-width: 760px) {
  .gc-page-body > .gc-blk:first-child { padding-top: 128px; }
  .gc-page-body > .gc-sec:first-child > section:not(.gc-hero):not(.gc-about-hero):not(.gc-page-hero),
  .gc-page-body > .gc-sec:first-child > div:not(.gc-contact) { padding-top: 128px; }
}