/* ==========================================================================
   Rebrind — faithful clone of the current live rebrind.com (off WordPress).
   Values captured verbatim from the live Divi build's compiled CSS:
     header red        rgb(253, 0, 3)
     purple fallback   rgb(102, 46, 145)   (sections 2 & 4)
     charcoal fallback rgb(70, 70, 70)      (section 3 & team)
     headings          Roboto 36px / 1.1em, centered, white
     body / links      Cuprum 18px, white
     sections          100vh, background-attachment: fixed (parallax), cover
   The bold graphic backgrounds (OPENING.gif, 2-1/3-1/4-1.jpg) are the real
   design; the solid colors sit under them exactly as fallbacks, as on the
   original.

   v3: header simplified to Work / Contact / Start a project (right-aligned).
   Work and Start a project are now their own pages (work.html,
   start-a-project.html); Contact is an in-page anchor to the section at the
   bottom of the home page.
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  color: #fff;
  background: #231f20;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ---------- Header (sticky red bar) ---------- */
.rbc-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  background: rgb(253, 0, 3);
  padding: 0 5%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rbc-header__logo img { height: 24px; width: auto; display: block; }
.rbc-nav {
  display: flex;
  gap: 26px;
  align-items: center;
  margin-left: auto;   /* right-align the single remaining nav group */
}
.rbc-nav a {
  color: #fff;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 300ms;
}
.rbc-nav a:hover { color: rgba(255, 255, 255, 0.8); }

/* "Start a project" CTA — inverted (white on red) so it reads as a button
   against the red bar, not just another link; matches the v0.1 pattern of
   giving the primary action a filled, contrasting treatment. */
.rbc-nav__cta {
  background: #fff;
  color: rgb(253, 0, 3) !important;
  padding: 9px 18px;
  border-radius: 2px;
  transition: background 250ms, color 250ms;
}
.rbc-nav__cta:hover {
  background: rgb(35, 31, 32);
  color: #fff !important;
}

/* ---------- Full-height parallax sections (home page mood pieces) ---------- */
.rbc-section {
  position: relative;
  min-height: 100vh;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 6%;
}
/* Hero / opening — red animated R + sword. No text, matches original. */
.rbc-hero {
  background-color: rgb(253, 0, 3);
  background-image: url("assets/OPENING.gif");
}
/* Section 2 — Creative Think Tank (real bg amber R+bulb; purple fallback) */
.rbc-company {
  background-color: rgb(102, 46, 145);
  background-image: url("assets/2-1.jpg");
}
/* Section 3 — Art-that-works (real bg charcoal R+arrows; gray fallback) */
.rbc-works {
  background-color: rgb(70, 70, 70);
  background-image: url("assets/3-1.jpg");
}
/* Section 4 — Strategic & Business (real bg green R+needle; purple fallback) */
.rbc-business {
  background-color: rgb(102, 46, 145);
  background-image: url("assets/4-1.jpg");
}
/* Section 5 — Human (are) Capital. Graphic 6-1.jpg (black, R + dagger);
   black fallback matches the graphic. */
.rbc-team {
  background-color: #000000;
  background-image: url("assets/6-1.jpg");
}

/* ---------- Centered text block inside each mood section ---------- */
.rbc-block { max-width: 620px; margin: 0 auto; }
.rbc-block h2 {
  font-family: Roboto, Helvetica, Arial, Lucida, sans-serif;
  font-size: 36px;
  line-height: 1.1em;
  font-weight: 500;
  color: #fff;
  margin: 0 0 26px;
}
.rbc-block p {
  font-family: Cuprum, Helvetica, Arial, Lucida, sans-serif;
  font-size: 18px;
  line-height: 1.5em;
  color: #fff;
  margin: 0 0 26px;
}
.rbc-block__link {
  font-family: Cuprum, Helvetica, Arial, Lucida, sans-serif;
  font-size: 18px;
  color: #fff;
  display: inline-block;
  transition: opacity 200ms;
}
.rbc-block__link:hover { opacity: 0.75; }

/* ---------- Standalone sub-page wrapper (Work, Start a project) ----------
   These pages scroll normally under the fixed header, so they need top
   padding equal to the header height instead of sitting behind it. */
.rbc-page {
  background: #141414;
  padding-top: 60px;
  min-height: 100vh;
}
.rbc-page__hero {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 90px 6% 60px;
}
.rbc-eyebrow {
  font-family: Cuprum, Helvetica, Arial, Lucida, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(253, 0, 3);
  margin: 0 0 16px;
}
.rbc-page__hero h1 {
  font-family: Roboto, Helvetica, Arial, Lucida, sans-serif;
  font-size: 40px;
  line-height: 1.15em;
  font-weight: 500;
  color: #fff;
  margin: 0 0 18px;
}
.rbc-page__hero p {
  font-family: Cuprum, Helvetica, Arial, Lucida, sans-serif;
  font-size: 18px;
  line-height: 1.55em;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

/* ---------- Generic button (used on sub-pages, outside the header) ---------- */
.rbc-btn {
  display: inline-block;
  font-family: Cuprum, Helvetica, Arial, Lucida, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgb(253, 0, 3);
  padding: 14px 30px;
  border-radius: 2px;
  transition: background 200ms, color 200ms;
}
.rbc-btn:hover { background: #fff; color: rgb(253, 0, 3); }
.rbc-btn--light {
  background: #fff;
  color: rgb(253, 0, 3);
}
.rbc-btn--light:hover { background: rgb(35, 31, 32); color: #fff; }

/* ---------- Work page (real portfolio) ---------- */
.rbc-work { padding: 0 6% 110px; }
.rbc-work__grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.rbc-project {
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.rbc-project img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.rbc-project__body { padding: 22px 24px 26px; }
.rbc-project__client {
  font-family: Cuprum, Helvetica, Arial, Lucida, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(253, 0, 3);
  margin: 0 0 8px;
}
.rbc-project__title {
  font-family: Roboto, Helvetica, Arial, Lucida, sans-serif;
  font-size: 21px;
  color: #fff;
  margin: 0 0 6px;
}
.rbc-project__meta {
  font-family: Cuprum, Helvetica, Arial, Lucida, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}
.rbc-project--todo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.4);
  font-family: Cuprum, Helvetica, Arial, Lucida, sans-serif;
  font-size: 14px;
  text-align: center;
  padding: 24px;
}
.rbc-work__cta { text-align: center; margin-top: 52px; }
@media (max-width: 780px) {
  .rbc-work__grid { grid-template-columns: 1fr; }
}

/* ---------- Contact section (on the home page — info only, no form) ----------
   Reached by clicking "Contact" in the header; sits at the bottom of the
   home page in the slot the Start-a-project form used to occupy. */
.rbc-contact {
  background: rgb(253, 0, 3);
  padding: 110px 6%;
  text-align: center;
}
.rbc-contact__wrap { max-width: 620px; margin: 0 auto; }
.rbc-contact h2 {
  font-family: Roboto, Helvetica, Arial, Lucida, sans-serif;
  font-size: 40px;
  line-height: 1.1em;
  font-weight: 500;
  color: #fff;
  margin: 0 0 20px;
}
.rbc-contact p {
  font-family: Cuprum, Helvetica, Arial, Lucida, sans-serif;
  font-size: 17px;
  line-height: 1.55em;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 8px;
}
.rbc-contact__meta-label {
  font-family: Cuprum, Helvetica, Arial, Lucida, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin: 28px 0 10px;
}
.rbc-contact a { color: #fff; text-decoration: underline; }
.rbc-contact__cta { margin-top: 34px; }
/* The CTA button inside Contact is a .rbc-btn, not a plain text link — undo
   the underline and repoint the color so it isn't swallowed by the generic
   ".rbc-contact a" rule above (which otherwise wins on specificity). */
.rbc-contact__cta .rbc-btn { text-decoration: none; }
.rbc-contact__cta .rbc-btn--light { color: rgb(253, 0, 3); }
.rbc-contact__cta .rbc-btn--light:hover { color: #fff; }

/* ---------- Start a project page (dedicated inquiry form) ---------- */
.rbc-form-page {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 6% 120px;
}
.rbc-form-page__note {
  text-align: center;
  font-family: Cuprum, Helvetica, Arial, Lucida, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin: -20px 0 40px;
}
.rbc-form-page__note a { color: rgba(255, 255, 255, 0.85); text-decoration: underline; }
.rbc-field { margin-bottom: 18px; text-align: left; }
.rbc-field label {
  display: block;
  font-family: Cuprum, Helvetica, Arial, Lucida, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 7px;
}
.rbc-field input,
.rbc-field select,
.rbc-field textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: Cuprum, Helvetica, Arial, Lucida, sans-serif;
  font-size: 15px;
  border: none;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.95);
  color: #231f20;
}
.rbc-field textarea { min-height: 120px; resize: vertical; }
.rbc-field input:focus, .rbc-field select:focus, .rbc-field textarea:focus {
  outline: 2px solid rgb(253, 0, 3);
}
.rbc-field--hp { position: absolute; left: -9999px; opacity: 0; }
.rbc-submit {
  font-family: Cuprum, Helvetica, Arial, Lucida, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgb(253, 0, 3);
  border: none;
  border-radius: 2px;
  padding: 14px 34px;
  cursor: pointer;
  transition: background 200ms, color 200ms;
  width: 100%;
}
.rbc-submit:hover { background: #fff; color: rgb(253, 0, 3); }

/* ---------- Footer (one centered line, small logo) ---------- */
.rbc-footer {
  background: #231f20;
  padding: 20px 6%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: nowrap;
  text-align: center;
}
.rbc-footer__logo img { height: 28px; width: auto; }
.rbc-footer__text {
  font-family: Cuprum, Helvetica, Arial, Lucida, sans-serif;
  font-size: 14px;
  line-height: 1.4em;
  color: #fff;
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .rbc-footer { flex-wrap: wrap; }
  .rbc-footer__text { white-space: normal; }
}

/* ---------- Opening popup ("Explore." intro — home page only) ---------- */
.rbc-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgb(253, 0, 3);
  display: flex;
  align-items: flex-end;              /* text sits low, over the plain red area */
  justify-content: center;
  padding-bottom: 12vh;
  overflow: hidden;
  transition: opacity 600ms ease, visibility 600ms ease;
}
.rbc-popup.is-closed { opacity: 0; visibility: hidden; }
.rbc-popup__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.rbc-popup__inner {
  position: relative;
  z-index: 2;
  text-align: center;
}
/* Just clickable text — no rectangle, no background, no border. */
.rbc-popup__btn {
  font-family: Cuprum, Helvetica, Arial, Lucida, sans-serif;
  font-size: 22px;
  color: #fff;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);   /* legibility only, not a button */
  transition: opacity 200ms;
}
.rbc-popup__btn:hover { opacity: 0.75; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .rbc-block h2 { font-size: 30px; }
  .rbc-section { background-attachment: scroll; }  /* iOS ignores fixed anyway */
}