/* Reelaroo agency direction — Apple-like structure, original editorial campaign art */

:root {
  --ink: #171716;
  --ink-soft: #69645f;
  --paper: #f3eee6;
  --paper-light: #fffdfa;
  --line: #d9d1c7;
  --brand-coral: #f04f37;
  --brand-coral-dark: #9d2f20;
  --brand-mint: #91d2c5;
  --brand-mint-dark: #236f66;
  --brand-cobalt: #2147d9;
  --dark-surface: #111110;
}

html { background: var(--paper-light); }
body { background: var(--paper-light); color: var(--ink); }

.site-header {
  border-color: rgba(23, 23, 22, 0.08);
  background: rgba(255, 253, 250, 0.88);
}

.wordmark {
  gap: 9px;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 760;
  letter-spacing: -0.035em;
}

.wordmark-icon {
  width: 38px;
  height: 38px;
  display: grid;
  flex: 0 0 38px;
  place-items: center;
}

.wordmark-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wordmark-name { display: inline; }
.desktop-nav a { color: #514d49; }

.button-dark,
.button-primary { background: var(--brand-mint-dark); color: #fff; }

.button-dark:hover,
.button-primary:hover {
  background: #195b54;
  box-shadow: 0 12px 30px rgba(35, 111, 102, 0.23);
}

.button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline-color: rgba(35, 111, 102, 0.62); }

.eyebrow,
.centred-heading .eyebrow,
#what-we-create .eyebrow,
#how-it-works .eyebrow,
.monthly-grid .eyebrow,
.faq-heading .eyebrow,
.contact-copy .eyebrow { color: var(--brand-mint-dark); }

.eyebrow > span { background: var(--brand-coral); }

.hero {
  padding-top: 88px;
  background:
    radial-gradient(circle at 50% 72%, rgba(145, 210, 197, 0.2), transparent 31%),
    radial-gradient(circle at 83% 30%, rgba(33, 71, 217, 0.08), transparent 24%),
    var(--dark-surface);
  color: #fff;
}

.hero .eyebrow { color: var(--brand-mint); }
.hero h1 { color: #fff; }

.hero h1 em {
  background: linear-gradient(90deg, #fff 0%, var(--brand-mint) 58%, #c9efe8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.hero-intro,
.hero .trust-list li { color: #aaa8a4; }
.hero .text-link { color: #fff; }
.hero .trust-list li::before { background: var(--brand-coral); }

.hero-visual::before {
  background: radial-gradient(circle, rgba(145, 210, 197, 0.21), rgba(33, 71, 217, 0.05) 48%, transparent 73%);
}

.orbit { border-color: rgba(145, 210, 197, 0.14); }

.phone-preview {
  border-color: #2b2b2a;
  background: #111;
  box-shadow: 0 44px 100px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.video-art { isolation: isolate; background: #191918; }
.video-art::before { display: none; }

.video-art::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.03) 40%, rgba(0, 0, 0, 0.78) 100%);
  pointer-events: none;
}

.campaign-hero-image {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}

.video-label,
.video-message { z-index: 2; }

.video-label {
  background: rgba(255, 253, 250, 0.9);
  color: var(--ink);
  backdrop-filter: blur(12px);
}

.floating-card {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 253, 250, 0.93);
  color: var(--ink);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(18px);
}

.audio-bars { background: var(--brand-cobalt); }

.service-strip {
  border-color: #ddd4c9;
  background: var(--paper);
  color: var(--ink);
}

.strip-grid > div { border-color: #d6cdc2; }
.strip-grid strong { color: var(--ink); }
.strip-grid span { color: var(--ink-soft); }

.purpose-section { background: var(--paper-light); }

.purpose-heading { max-width: 1050px; margin-bottom: 54px; }
.purpose-heading .eyebrow { justify-content: flex-start; }

.purpose-heading h2 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(4rem, 7.5vw, 7.2rem);
  letter-spacing: -0.072em;
  line-height: 0.94;
}

.purpose-visual {
  position: relative;
  height: 670px;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  background: var(--paper);
}

.purpose-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 54%, rgba(17, 17, 16, 0.72) 100%);
}

.purpose-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.purpose-visual figcaption {
  position: absolute;
  z-index: 2;
  right: 40px;
  bottom: 36px;
  left: 40px;
  max-width: 790px;
  color: #fff;
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 620;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.purpose-copy-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 60px;
  margin-top: 45px;
}

.purpose-copy-grid p { margin: 0; color: var(--ink-soft); }

.purpose-lead {
  color: var(--ink) !important;
  font-size: clamp(1.4rem, 2.25vw, 1.95rem);
  font-weight: 580;
  letter-spacing: -0.035em;
  line-height: 1.23;
}

.purpose-copy-grid h3 {
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.audience-section { background: var(--dark-surface); color: #f7f5f1; }
.audience-heading h2 { color: #fff; }
.audience-heading > p { color: #aaa8a4; }
.audience-heading .eyebrow { color: var(--brand-mint); }

.audience-grid {
  display: grid;
  grid-template-areas:
    "agriculture food retail"
    "agriculture property property"
    "agriculture fitness products";
  grid-template-columns: 1.08fr 0.96fr 0.96fr;
  grid-template-rows: repeat(3, 310px);
  gap: 16px;
}

.audience-card:nth-child(1) { grid-area: agriculture; }
.audience-card:nth-child(2) { grid-area: food; }
.audience-card:nth-child(3) { grid-area: retail; }
.audience-card:nth-child(4) { grid-area: property; }
.audience-card:nth-child(5) { grid-area: fitness; }
.audience-card:nth-child(6) { grid-area: products; }

.audience-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: #242422;
}

.audience-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(10, 10, 9, 0.89) 100%);
}

.audience-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.audience-card:nth-child(1) img { object-position: center 44%; }
.audience-card:nth-child(2) img { object-position: center 39%; }
.audience-card:nth-child(3) img { object-position: center 39%; }
.audience-card:nth-child(4) img { object-position: center 48%; }
.audience-card:nth-child(5) img { object-position: center 44%; }
.audience-card:nth-child(6) img { object-position: center 44%; }
.audience-card:hover img { transform: scale(1.025); }

.audience-card > div {
  position: absolute;
  z-index: 2;
  right: 26px;
  bottom: 24px;
  left: 26px;
}

.audience-card span {
  display: block;
  margin-bottom: 7px;
  color: var(--brand-mint);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.audience-card h3 {
  max-width: 650px;
  margin: 0;
  color: #fff;
  font-size: clamp(1.25rem, 2.1vw, 1.9rem);
  font-weight: 620;
  line-height: 1.08;
}

.audience-note {
  margin: 22px 4px 0;
  color: #898985;
  font-size: 0.76rem;
  text-align: right;
}

#what-we-create,
.deliverables-section { background: var(--paper); }

.content-grid { grid-template-columns: 1.12fr 0.88fr; gap: 18px; }

.content-card {
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  box-shadow: none;
}

.content-card-large { min-height: 930px; }
.card-lime,
.card-cream { min-height: 456px; }
.card-dark { grid-column: 1 / -1; min-height: 500px; }

.campaign-image {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-coral .campaign-image { object-position: center; }
.card-lime .campaign-image { object-position: center 47%; }
.card-cream .campaign-image { object-position: center 44%; }
.card-dark .campaign-image { object-position: center 45%; }

.card-coral,
.card-lime,
.card-cream,
.card-dark { color: #fff; background: #171716; }

.card-coral::after,
.card-lime::after,
.card-cream::after,
.card-dark::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 9, 0.02) 32%, rgba(10, 10, 9, 0.92) 100%);
}

.card-dark::after {
  background:
    linear-gradient(90deg, rgba(10, 10, 9, 0.97) 0%, rgba(10, 10, 9, 0.72) 35%, rgba(10, 10, 9, 0.05) 76%),
    linear-gradient(180deg, transparent 48%, rgba(10, 10, 9, 0.58) 100%);
}

.card-number,
.content-card-copy,
.offer-graphic { position: relative; z-index: 2; }

.card-number {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(17, 17, 16, 0.36);
  color: #fff;
  backdrop-filter: blur(12px);
}

.content-card h3,
.content-card p { color: #fff; }
.content-card p { opacity: 0.74; }

.card-lime .offer-graphic {
  position: absolute;
  top: 28px;
  right: 30px;
  align-items: flex-end;
  margin: 0;
}

.card-lime .offer-graphic strong {
  color: #fff;
  font-size: clamp(3.6rem, 6.8vw, 5.8rem);
  text-shadow: 0 3px 26px rgba(0, 0, 0, 0.32);
  -webkit-text-fill-color: #fff;
}

.card-lime .offer-graphic span { background: var(--brand-mint-dark); color: #fff; }
.visual-note { color: #7a746e; }

#how-it-works { background: var(--paper-light); }
.steps-grid { align-items: stretch; gap: 18px; }

.step-card,
.featured-step {
  position: relative;
  min-height: 610px;
  display: flex;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: none;
  color: var(--ink);
  transform: none;
}

.featured-step { border-color: #2c2c2a; background: var(--dark-surface); color: #fff; }

.step-media {
  height: 280px;
  flex: 0 0 280px;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
}

.step-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 450ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.step-card:first-child .step-media img { object-position: center 49%; }
.step-card:nth-child(2) .step-media img { object-position: center 52%; }
.step-card:nth-child(3) .step-media img { object-position: center 51%; }
.step-card:hover .step-media img { transform: scale(1.025); }

.step-top {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  left: 18px;
  margin: 0;
}

.step-top span,
.featured-step .step-top span,
.step-top i,
.featured-step .step-top i {
  border: 0;
  background: rgba(255, 253, 250, 0.94);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  color: var(--ink);
  backdrop-filter: blur(12px);
}

.step-top span { background: var(--brand-coral); color: #fff; }

.step-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  padding: 29px;
}

.step-kicker {
  margin-bottom: 10px;
  color: var(--brand-mint-dark);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.featured-step .step-kicker { color: var(--brand-mint); }

.step-card h3,
.featured-step h3 {
  margin: 0 0 10px;
  color: currentColor;
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
}

.step-card p { color: var(--ink-soft); }
.featured-step p { color: #aaa8a4; }

.standards-section { background: var(--dark-surface); color: #fff; }

.standards-grid {
  gap: 76px;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  color: #fff;
}

.standards-visual {
  min-height: 590px;
  overflow: hidden;
  border-radius: 24px;
  background: #222220;
}

.standards-visual::before { display: none; }

.standards-photo {
  width: 100%;
  height: 590px;
  object-fit: cover;
  object-position: center 48%;
}

.review-badge {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 253, 250, 0.92);
  color: var(--ink);
}

.review-badge > span { background: var(--brand-mint-dark); color: #fff; }
.standards-copy .eyebrow { color: var(--brand-mint); }
.standards-copy h2 { color: #fff; }
.standards-copy > p { color: #aaa8a4; }
.check-list li { color: #ece9e4; }
.check-list span { background: rgba(145, 210, 197, 0.15); color: var(--brand-mint); }

.monthly-section { background: #e9f4f0; color: var(--ink); }
.monthly-grid h2 { color: var(--ink); }
.monthly-grid .eyebrow { color: var(--brand-mint-dark); }

.monthly-card {
  border: 1px solid rgba(35, 111, 102, 0.14);
  border-radius: 24px;
  background: var(--paper-light);
  color: var(--ink);
  box-shadow: 0 28px 70px rgba(35, 80, 73, 0.1);
}

.monthly-card li { border-color: #ddd7cf; }
.monthly-card li span { color: var(--brand-coral-dark); }
.monthly-label,
.monthly-card > p:last-of-type { color: var(--ink-soft); }

.faq-section { background: var(--paper-light); }
.faq-list details { border-color: var(--line); }
.faq-list summary span { background: #e6f2ee; color: var(--brand-mint-dark); }
.faq-list details:not([open]) > :not(summary) { display: none; }
.faq-list details[open] > p { display: block; }

.contact-section {
  background:
    radial-gradient(circle at 12% 18%, rgba(145, 210, 197, 0.16), transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(240, 79, 55, 0.1), transparent 28%),
    var(--dark-surface);
}

.contact-grid { background: transparent; }
.contact-copy { color: #fff; }
.contact-copy .eyebrow { color: var(--brand-mint); }
.contact-copy > p { color: #aaa8a4; }
.contact-points span { color: #dedbd6; }

.contact-points i {
  border-color: rgba(145, 210, 197, 0.24);
  background: rgba(145, 210, 197, 0.14);
  color: var(--brand-mint);
}

.contact-form {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: var(--paper-light);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.28);
}

input:focus,
textarea:focus,
select:focus { border-color: var(--brand-mint-dark); }

.site-footer { background: #090909; }

.wordmark-footer { color: #fff; }

.wordmark-footer .wordmark-icon {
  padding: 4px;
  border-radius: 50%;
  background: var(--paper-light);
}

@media (max-width: 700px) {
  .wordmark-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .wordmark-name { display: inline; }
}

@media (max-width: 1000px) {
  .purpose-copy-grid { grid-template-columns: 1fr 1fr; gap: 34px 48px; }
  .purpose-lead { grid-column: 1 / -1; max-width: 780px; }

  .audience-grid {
    grid-template-areas:
      "agriculture agriculture"
      "food retail"
      "property property"
      "fitness products";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 480px 320px 410px 360px;
  }

  .content-card-large { min-height: 720px; }
  .standards-grid { gap: 54px; }
}

@media (max-width: 820px) {
  .steps-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
  .step-card,
  .featured-step { min-height: 0; }
  .step-media { height: 350px; flex-basis: 350px; }
}

@media (max-width: 700px) {
  .hero h1 em {
    background: linear-gradient(90deg, #fff, var(--brand-mint));
    background-clip: text;
    -webkit-background-clip: text;
  }

  .purpose-heading h2 { font-size: clamp(3rem, 14vw, 4.4rem); }
  .purpose-visual { height: 500px; border-radius: 20px; }
  .purpose-visual img { object-position: 40% center; }

  .purpose-visual figcaption {
    right: 23px;
    bottom: 23px;
    left: 23px;
  }

  .purpose-copy-grid { grid-template-columns: 1fr; gap: 26px; margin-top: 34px; }
  .purpose-lead { grid-column: auto; }

  .audience-grid {
    grid-template-areas:
      "agriculture"
      "food"
      "retail"
      "property"
      "fitness"
      "products";
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 410px);
  }

  .audience-note { text-align: left; }

  .content-grid { grid-template-columns: 1fr; }

  .content-card,
  .content-card-large,
  .card-coral,
  .card-lime,
  .card-cream,
  .card-dark { min-height: 540px; }

  .card-dark { grid-column: auto; }

  .card-dark::after {
    background: linear-gradient(180deg, rgba(10, 10, 9, 0.03) 28%, rgba(10, 10, 9, 0.94) 77%);
  }

  .step-media { height: 280px; flex-basis: 280px; }

  .standards-visual,
  .standards-photo { min-height: 450px; height: 450px; }

  .standards-grid { gap: 44px; }
  .contact-form { border-radius: 20px; }
}

@media (max-width: 430px) {
  .header-inner { gap: 12px; }
  .button-small { padding-inline: 11px; }
  h1 { font-size: clamp(3.2rem, 16.5vw, 4.2rem); }
  .hero-actions { flex-direction: column; }
  .hero-visual { min-height: 495px; }
  .floating-card { transform: scale(0.88); }
  .card-caption { right: -44px; }
  .card-audio { left: -48px; }
}