:root {
  --brand-black: #050505;
  --brand-black-soft: #0b0b0b;
  --brand-charcoal: #161616;
  --brand-charcoal-raised: #202020;
  --brand-gold: #d6b45c;
  --brand-gold-bright: #e7ca78;
  --brand-gold-deep: #8f7336;
  --brand-line: #5d4b2d;
  --brand-white: #f8f7f2;
  --brand-muted: #c8c4bb;
  --bg: var(--brand-black);
  --bg2: var(--brand-black-soft);
  --card: var(--brand-charcoal);
  --card2: var(--brand-charcoal-raised);
  --line: var(--brand-line);
  --text: var(--brand-white);
  --muted: var(--brand-muted);
  --lime: var(--brand-gold);
  color-scheme: dark;
}

html {
  background: var(--brand-black);
}

body {
  background: radial-gradient(circle at 32% 20%, rgba(214, 180, 92, .08), transparent 29%), var(--brand-black) !important;
  color: var(--brand-white) !important;
}

.top,
.m-top,
.mobile-programme .m-top,
.mobile-programme:target .m-top {
  background: rgba(5, 5, 5, .98) !important;
  border-color: var(--brand-line) !important;
}

.desktop,
.page,
.desktop-programme,
.mobile,
.mobile-programme {
  background: var(--brand-black) !important;
  color: var(--brand-white) !important;
}

.brand span,
.m-brand span,
.ey,
.eyebrow,
.lime,
.learn,
.num,
.m-num,
.m-eyebrow,
.m-tagline,
.micro,
.m-book small,
.gk-book-brand,
.gk-book-tag {
  color: var(--brand-gold) !important;
}

.menu summary,
.m-menu summary {
  background: #101010 !important;
  border-color: #665539 !important;
  color: var(--brand-white) !important;
}

.bars i,
.m-bars i {
  background: var(--brand-gold) !important;
}

.menubox,
.m-menubox {
  background: #0d0d0d !important;
  border-color: var(--brand-line) !important;
}

.menubox a,
.m-menubox a,
.links a {
  color: var(--brand-white) !important;
}

.menubox a:hover,
.m-menubox a:hover {
  background: #292216 !important;
  color: var(--brand-gold-bright) !important;
}

.hero {
  background: radial-gradient(circle at 82% 28%, rgba(214, 180, 92, .08), transparent 31%), var(--brand-black) !important;
}

.lead,
.copy,
.small,
.card p,
.box p,
.faq p,
.m-copy,
.m-card p,
.m-step p,
.stat small {
  color: var(--brand-muted) !important;
}

.btn,
.m-btn,
.c a {
  background: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: #080706 !important;
}

.btn:hover,
.m-btn:hover,
.c a:hover {
  background: var(--brand-gold-bright) !important;
  border-color: var(--brand-gold-bright) !important;
}

.btn.ghost,
.m-btn.secondary {
  background: transparent !important;
  border-color: #806a42 !important;
  color: var(--brand-white) !important;
}

.pill,
.tag {
  background: #111111 !important;
  border-color: #5c4b30 !important;
  color: #e0ddd5 !important;
}

.section,
.m-section,
.nav,
.footer,
.m-footer {
  border-color: var(--brand-line) !important;
}

.card,
.box,
.faq details,
.faq > div,
.m-card,
.m-step {
  background: linear-gradient(180deg, #191919, #111111) !important;
  border-color: var(--brand-line) !important;
}

.feature,
.bigbox {
  background: linear-gradient(135deg, #211b10, #111111) !important;
  border-color: #8b7038 !important;
}

.featurelist div,
.list div {
  background: rgba(0, 0, 0, .28) !important;
  border-color: #735e38 !important;
}

.productvisual,
.m-visual,
.photo {
  background: radial-gradient(circle at 50% 30%, rgba(214, 180, 92, .22), transparent 33%), linear-gradient(145deg, #19150e, #070707) !important;
  border-color: #816a3e !important;
}

.book,
.m-book,
.gk-book {
  background: linear-gradient(150deg, #090909, #292114) !important;
  border-color: #a2864b !important;
}

.gk-book:before {
  background: linear-gradient(90deg, #2b2418, #080808) !important;
  border-color: rgba(214, 180, 92, .28) !important;
}

.gk-book:after {
  background: linear-gradient(120deg, rgba(255, 255, 255, .04), transparent 32%, transparent 68%, rgba(214, 180, 92, .04)) !important;
}

.gk-book-title,
.photo:after,
.m-visual:after {
  color: var(--brand-white) !important;
}

.ey {
  border-color: #a2864b !important;
}

.check {
  color: #e6e2da !important;
}

.dot,
[style*="background:#a9ff3f"] {
  background: var(--brand-gold) !important;
  color: #080706 !important;
}

.gk-book {
  box-shadow: -12px 12px 0 rgba(0, 0, 0, .62), 0 24px 42px rgba(0, 0, 0, .48) !important;
}

.stat,
.benefits,
.benefits div {
  border-color: #6d5936 !important;
}

.cta,
.m-cta {
  background: linear-gradient(135deg, #dec06d, #b8913e) !important;
  border-color: #f0d789 !important;
  color: #080706 !important;
}

.cta .ey,
.cta .copy,
.m-cta .m-eyebrow,
.m-cta .m-copy,
.m-cta .m-digital-note,
.m-cta p {
  color: #18130b !important;
}

.cta .btn,
.m-cta .m-btn:not(.secondary) {
  background: #080808 !important;
  border-color: #080808 !important;
  color: var(--brand-white) !important;
}

.m-cta .m-btn.secondary {
  background: transparent !important;
  border-color: #60491f !important;
  color: #080706 !important;
}

.quote {
  background: #151515 !important;
  border-color: var(--brand-gold) !important;
  color: #dedbd3 !important;
}

.footer,
.m-footer,
.m-digital-note {
  color: #aaa69d !important;
}

.desktop-programme > img {
  filter: hue-rotate(-46deg) saturate(.68) brightness(.92) contrast(1.06);
}

a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brand-gold-bright);
  outline-offset: 3px;
}

/* FootyDevelopment identity */
.brand,
.m-brand {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.brand::before,
.m-brand::before {
  content: "";
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  background: #050505 url("/assets/footydevelopment-logo.jpeg") center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(214, 180, 92, .72), 0 6px 18px rgba(0, 0, 0, .38);
  clip-path: circle(49% at 50% 50%);
}

.desktop-programme::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: 1.45%;
  top: .28%;
  width: clamp(42px, 4vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #050505 url("/assets/footydevelopment-logo.jpeg") center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(214, 180, 92, .78), 0 8px 24px rgba(0, 0, 0, .42);
  clip-path: circle(49% at 50% 50%);
  pointer-events: none;
}

.card {
  position: relative;
  padding-right: 76px !important;
}

.card::before,
.m-visual::before,
.photo::before,
.productvisual::before {
  content: "";
  position: absolute;
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #050505 url("/assets/footydevelopment-logo.jpeg") center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(214, 180, 92, .58), 0 7px 18px rgba(0, 0, 0, .38);
  clip-path: circle(49% at 50% 50%);
  pointer-events: none;
}

.card::before {
  top: 20px;
  right: 20px;
}

.m-visual,
.photo,
.productvisual {
  position: relative;
}

.m-visual::before,
.photo::before,
.productvisual::before {
  top: 16px;
  right: 16px;
}

.etsy-card,
.etsy-feature {
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.product-card-link,
.feature-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 16px;
}

.product-card-link .etsy-card {
  height: 100%;
}

.feature-card-link {
  border-radius: 22px;
}

.product-card-link:hover .etsy-card,
.product-card-link:focus-visible .etsy-card,
.feature-card-link:hover .etsy-feature,
.feature-card-link:focus-visible .etsy-feature {
  transform: translateY(-3px);
  border-color: var(--brand-gold-bright) !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, .42), 0 0 0 1px rgba(214, 180, 92, .16);
}

.feature.etsy-feature {
  position: relative;
}

.footerin > div:first-child,
.m-footer .m-wrap,
.footer.wrap > div:first-child {
  position: relative;
  min-height: 48px;
  padding-left: 60px;
}

.footerin > div:first-child::before,
.m-footer .m-wrap::before,
.footer.wrap > div:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #050505 url("/assets/footydevelopment-logo.jpeg") center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(214, 180, 92, .58);
  clip-path: circle(49% at 50% 50%);
}

@media (max-width: 460px) {
  .brand,
  .m-brand {
    gap: 8px;
    font-size: 11px !important;
  }

  .brand::before,
  .m-brand::before {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
}