/*
Theme Name: Spunky Cow Child Friday
Theme URI: https://spunkycow.co
Description: A simple Divi child theme for Spunky Cow Web Design.
Author: Spunky Cow
Author URI: https://spunkycow.co
Template: Divi
Version: 1.0.8
Text Domain: spunkycow-divi-child
*/

:root {
  --spc-ink: #fff8eb;
  --spc-dark: #12100d;
  --spc-deep: #1b1813;
  --spc-muted: #d2c5ad;
  --spc-paper: #15130f;
  --spc-panel: #251f18;
  --spc-primary: #f0d37b;
  --spc-accent: #e38d52;
  --spc-gold: #e5bf57;
  --spc-sage: #78937d;
  --spc-teal: #67b7ac;
  --spc-rose: #c56f78;
  --spc-clay: #3d2d20;
  --spc-line: rgba(255, 248, 235, .16);
  --spc-shadow: 0 24px 80px rgba(0, 0, 0, .34);
  --spc-pointer-x: 0;
  --spc-pointer-y: 0;
}

body.spc-home-template {
  background: var(--spc-paper);
  color: var(--spc-ink);
}

body.spc-home-template #main-footer {
  display: none;
}

.spc-page,
.spc-page * {
  box-sizing: border-box;
}

.spc-page {
  background:
    linear-gradient(90deg, rgba(255, 248, 235, .045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 248, 235, .045) 1px, transparent 1px),
    radial-gradient(circle at 78% 16%, rgba(229, 191, 87, .13), transparent 26%),
    radial-gradient(circle at 12% 72%, rgba(103, 183, 172, .11), transparent 28%),
    var(--spc-paper);
  background-size: 48px 48px;
  color: var(--spc-ink);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

.spc-page a {
  color: inherit;
}

.spc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(18px, 4vw, 56px);
  background: rgba(18, 16, 13, .94);
  border-bottom: 1px solid var(--spc-line);
  backdrop-filter: blur(14px);
}

.spc-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--spc-ink);
  font-size: 19px;
  font-weight: 800;
  text-decoration: none;
}

.spc-brand img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.spc-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 15px;
}

.spc-nav a {
  color: var(--spc-muted);
  text-decoration: none;
}

.spc-button,
.spc-nav .spc-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  border: 1px solid var(--spc-ink);
  border-radius: 6px;
  background: var(--spc-gold);
  color: #15130f;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 4px 4px 0 rgba(255, 248, 235, .24);
  transition: transform .18s ease, box-shadow .18s ease;
}

.spc-button:hover,
.spc-nav .spc-nav-button:hover {
  color: #15130f;
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 rgba(255, 248, 235, .24);
}

.spc-hero {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr);
  gap: clamp(28px, 6vw, 90px);
  align-items: center;
  min-height: calc(100vh - 78px);
  padding: clamp(56px, 8vw, 96px) clamp(18px, 6vw, 90px);
  overflow: hidden;
  border-bottom: 1px solid var(--spc-line);
}

.spc-eyebrow {
  margin: 0 0 12px;
  color: var(--spc-accent);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.spc-page h1,
.spc-page h2,
.spc-page h3,
.spc-page p {
  margin-top: 0;
}

.spc-page h1 {
  max-width: 760px;
  margin-bottom: 22px;
  color: var(--spc-ink);
  font-size: clamp(38px, 5.1vw, 68px);
  line-height: 1.02;
  letter-spacing: 0;
}

.spc-page h2 {
  color: var(--spc-ink);
  font-size: clamp(31px, 3.7vw, 52px);
  line-height: 1.05;
  letter-spacing: 0;
}

.spc-page h3 {
  color: var(--spc-ink);
  font-size: 22px;
}

.spc-lede {
  max-width: 640px;
  color: var(--spc-muted);
  font-size: 22px;
}

.spc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

.spc-button.spc-secondary {
  background: transparent;
  color: var(--spc-ink);
  border-color: var(--spc-muted);
}

.spc-hero-visual {
  position: relative;
  min-height: 500px;
}

.spc-flow-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--spc-line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(229, 191, 87, .2), transparent 36%),
    linear-gradient(315deg, rgba(227, 141, 82, .18), transparent 40%),
    linear-gradient(180deg, rgba(255, 248, 235, .06), transparent),
    #201c15;
  box-shadow: 14px 14px 0 rgba(229, 191, 87, .18);
}

.spc-flow-field::before,
.spc-flow-field::after {
  content: "";
  position: absolute;
  inset: 26px;
  border: 1px solid rgba(255, 248, 235, .16);
}

.spc-flow-field::after {
  inset: 78px 58px;
  border-color: rgba(216, 180, 95, .24);
  transform: rotate(-5deg);
}

.spc-float-icon {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(72px, 9vw, 116px);
  aspect-ratio: 1;
  border: 1px solid var(--spc-ink);
  border-radius: 8px;
  background: var(--spc-gold);
  color: #161514;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .28);
  transform:
    translate(
      calc(var(--spc-pointer-x) * var(--move-x)),
      calc(var(--spc-pointer-y) * var(--move-y))
    )
    rotate(var(--angle));
  animation: spc-icon-drift 7s ease-in-out infinite;
  transition: transform .16s ease-out;
}

.spc-float-icon svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spc-float-icon-1 {
  --move-x: 32px;
  --move-y: -22px;
  --angle: -8deg;
  left: 9%;
  top: 14%;
  background: var(--spc-gold);
}

.spc-float-icon-2 {
  --move-x: -44px;
  --move-y: 26px;
  --angle: 7deg;
  right: 12%;
  top: 18%;
  background: var(--spc-teal);
}

.spc-float-icon-3 {
  --move-x: 24px;
  --move-y: 42px;
  --angle: 11deg;
  left: 18%;
  bottom: 16%;
  background: var(--spc-accent);
}

.spc-float-icon-4 {
  --move-x: -28px;
  --move-y: -36px;
  --angle: -12deg;
  right: 18%;
  bottom: 13%;
  background: var(--spc-sage);
}

.spc-float-icon-5 {
  --move-x: 18px;
  --move-y: -48px;
  --angle: 4deg;
  left: 42%;
  top: 39%;
  background: var(--spc-rose);
}

.spc-hero-note {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 7%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.spc-hero-note span,
.spc-quote-panel span {
  display: block;
  padding: 12px;
  border: 1px solid var(--spc-line);
  border-radius: 6px;
  background: rgba(246, 239, 227, .08);
  color: var(--spc-ink);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

@keyframes spc-icon-drift {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -14px; }
}

.spc-section,
.spc-quote {
  padding: clamp(54px, 8vw, 96px) clamp(18px, 6vw, 90px);
}

.spc-section-heading {
  max-width: 820px;
  margin-bottom: 34px;
}

.spc-work-grid,
.spc-service-list,
.spc-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.spc-work-card,
.spc-service-list article,
.spc-pricing-grid article,
.spc-quote-panel {
  border: 1px solid var(--spc-line);
  border-radius: 8px;
  background: var(--spc-panel);
  box-shadow: var(--spc-shadow);
}

.spc-work-card {
  display: block;
  overflow: hidden;
  min-height: 0;
  padding: 0;
  color: var(--spc-ink);
  text-decoration: none;
  transition: transform .2s ease, background .2s ease;
}

.spc-work-card:hover {
  color: var(--spc-ink);
  transform: translateY(-6px);
  background: #30281e;
}

.spc-work-preview {
  position: relative;
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: 14px;
  min-height: 260px;
  padding: 28px;
  overflow: hidden;
  border-bottom: 1px solid var(--spc-line);
  background:
    linear-gradient(135deg, rgba(229, 191, 87, .22), transparent 44%),
    #fff4de;
}

.spc-work-preview::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 2px solid rgba(21, 19, 15, .22);
  border-radius: 8px;
}

.spc-work-preview span {
  position: relative;
  display: block;
  border-radius: 5px;
  background: #251f18;
}

.spc-work-preview span:nth-child(1) {
  grid-column: 1 / -1;
  height: 18px;
  background: #15130f;
}

.spc-work-preview span:nth-child(2) {
  min-height: 132px;
}

.spc-work-preview span:nth-child(3),
.spc-work-preview span:nth-child(4) {
  min-height: 54px;
}

.spc-work-preview-author span:nth-child(2) {
  background: var(--spc-gold);
}

.spc-work-preview-voice span:nth-child(2) {
  background: var(--spc-teal);
}

.spc-work-preview-food span:nth-child(2) {
  background: var(--spc-accent);
}

.spc-work-card div {
  padding: 18px 20px 20px;
  border-top: 4px solid var(--spc-gold);
}

.spc-work-card:nth-child(2) div {
  border-top-color: var(--spc-teal);
}

.spc-work-card:nth-child(3) div {
  border-top-color: var(--spc-accent);
}

.spc-work-card span {
  display: block;
  color: var(--spc-accent);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

.spc-work-card small {
  display: block;
  margin-top: 5px;
  color: var(--spc-muted);
  font-size: 15px;
}

.spc-services {
  background:
    linear-gradient(90deg, #1d1913 0 68%, #272116 68% 100%);
}

.spc-service-list article,
.spc-pricing-grid article {
  padding: 26px;
}

.spc-service-list p,
.spc-pricing-grid p {
  color: var(--spc-muted);
}

.spc-pricing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.spc-price {
  color: var(--spc-accent) !important;
  font-size: 28px;
  font-weight: 900;
}

.spc-rate-note {
  margin: 24px 0 0;
  color: var(--spc-muted);
  font-size: 18px;
}

.spc-quote {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr);
  gap: clamp(24px, 5vw, 70px);
  background:
    linear-gradient(135deg, rgba(216, 180, 95, .12), transparent 42%),
    #100e0b;
  color: #fff;
}

.spc-quote h2,
.spc-quote .spc-eyebrow {
  color: var(--spc-gold);
}

.spc-quote p {
  color: var(--spc-muted);
}

.spc-quote a {
  color: var(--spc-gold);
}

.spc-quote .spc-button,
.spc-quote .spc-button:hover {
  color: #15130f;
}

.spc-quote-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-content: center;
  min-height: 260px;
  padding: 24px;
  transform:
    translate(
      calc(var(--spc-pointer-x) * -10px),
      calc(var(--spc-pointer-y) * 10px)
    );
  transition: transform .16s ease-out;
}

.spc-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 28px clamp(18px, 6vw, 90px);
  color: #fff;
  background: #100e0b;
  border-top: 1px solid var(--spc-line);
}

.spc-footer p {
  margin: 0;
  font-weight: 900;
}

@media (max-width: 900px) {
  .spc-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .spc-nav {
    flex-wrap: wrap;
  }

  .spc-hero,
  .spc-quote {
    grid-template-columns: 1fr;
  }

  .spc-hero {
    min-height: 0;
  }

  .spc-hero-visual {
    min-height: 280px;
  }

  .spc-work-grid,
  .spc-service-list,
  .spc-pricing-grid {
    grid-template-columns: 1fr;
  }

  .spc-flow-field {
    position: relative;
    min-height: 300px;
  }

  .spc-hero-note {
    grid-template-columns: 1fr;
  }

  .spc-footer {
    flex-direction: column;
  }
}