/* ==========================================================
   R.JENKINS BRANDS, INC.
   LANDING PAGE
   ========================================================== */


:root {

  --black: #000000;

  --white: #ffffff;

  --gold: #FDC231;

  --display:
    "Montserrat",
    Arial,
    sans-serif;

  --body:
    "Inter",
    Arial,
    sans-serif;

}


/* ==========================================================
   RESET
   ========================================================== */


* {

  box-sizing: border-box;

}


html,
body {

  min-height: 100%;

}


html {

  background: var(--black);

}


body {

  margin: 0;

  background: var(--black);

  color: var(--white);

  font-family: var(--body);

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}


/* ==========================================================
   HERO
   ========================================================== */


.hero {

  min-height: 100svh;

  display: grid;

  place-items: center;

  overflow: hidden;

  padding:

    clamp(28px, 5vh, 64px)

    24px;

}


.hero__inner {

  width: min(100%, 980px);

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}


/* ==========================================================
   R.JENKINS BRANDS LOGO
   ========================================================== */


.brand-logo {

  width:
    clamp(245px, 34vw, 455px);

  height: auto;

  margin-bottom:
    clamp(34px, 5vh, 58px);

}


/* ==========================================================
   PRIMARY HEADLINE
   ========================================================== */


.headline {

  margin: 0;

  font-family: var(--display);

  font-size:
    clamp(3rem, 6.9vw, 6.7rem);

  font-weight: 900;

  line-height: 0.88;

  letter-spacing: -0.055em;

  text-transform: uppercase;

}


.headline__line {

  display: block;

}


.headline__line--gold {

  color: var(--gold);

}


/* ==========================================================
   COMPANY STATEMENT
   ========================================================== */


.statement {

  width:
    min(100%, 690px);

  margin:

    clamp(30px, 4.5vh, 48px)

    0

    0;

  font-size:
    clamp(.9rem, 1.25vw, 1.08rem);

  line-height: 1.7;

  color:
    rgba(255,255,255,.86);

}


/* ==========================================================
   CREATE · BUILD · DISRUPT
   ========================================================== */


.mantra {

  margin:

    clamp(26px, 3.7vh, 40px)

    0

    0;

  display: flex;

  align-items: center;

  justify-content: center;

  gap:
    clamp(10px, 1.5vw, 18px);

  font-family: var(--display);

  font-size:
    clamp(.78rem, 1.15vw, .98rem);

  font-weight: 700;

  letter-spacing: .2em;

}


.dot {

  color: var(--gold);

}


/* ==========================================================
   SIGNATURE
   ========================================================== */


.signature-wrap {

  width:
    clamp(210px, 27vw, 330px);

  margin-top:
    clamp(30px, 4vh, 46px);

}


.signature-reveal {

  width: 0;

  overflow: hidden;

  animation:

    write-signature

    1.05s

    cubic-bezier(.65,0,.18,1)

    2.65s

    forwards;

}


.signature {

  display: block;

  width:
    clamp(210px, 27vw, 330px);

  max-width: none;

  height: auto;

}


/* ==========================================================
   PROFESSIONAL IDENTITY
   ========================================================== */


.role {

  margin:

    13px

    0

    0;

  font-family: var(--display);

  font-size:
    clamp(.56rem, .8vw, .72rem);

  font-weight: 700;

  letter-spacing: .16em;

  color:
    rgba(255,255,255,.72);

}


.role span {

  color: var(--gold);

}


/* ==========================================================
   BRAND NETWORK
   ========================================================== */


.brand-network {

  width:
    min(100%, 760px);

  margin-top:
    clamp(34px, 4.5vh, 52px);

  padding-top:
    clamp(22px, 2.8vh, 30px);

  border-top:
    1px solid rgba(255,255,255,.13);

}


/* BRAND NETWORK HEADING */


.brand-network__label {

  margin:

    0

    0

    20px;

  font-family: var(--display);

  font-size:
    clamp(.82rem, 1.2vw, 1.05rem);

  font-weight: 800;

  letter-spacing: .27em;

  color: var(--gold);

  text-transform: uppercase;

}


/* BRAND LINKS CONTAINER */


.brand-network__links {

  display: flex;

  align-items: center;

  justify-content: center;

  gap:
    clamp(14px, 2.1vw, 26px);

}


/* INDIVIDUAL BRAND LINKS */


.brand-network__links a {

  position: relative;

  padding-bottom: 7px;

  color:
    rgba(255,255,255,.76);

  font-family: var(--display);

  font-size:
    clamp(.82rem, 1.05vw, .96rem);

  font-weight: 700;

  letter-spacing: .10em;

  text-decoration: none;

  white-space: nowrap;

  transition:

    color .3s ease;

}


/* ANIMATED GOLD UNDERLINE */


.brand-network__links a::after {

  content: "";

  position: absolute;

  left: 50%;

  bottom: 0;

  width: 0;

  height: 1px;

  background: var(--gold);

  transform:
    translateX(-50%);

  transition:
    width .3s ease;

}


/* HOVER */


.brand-network__links a:hover,
.brand-network__links a:focus-visible {

  color: var(--gold);

}


.brand-network__links a:hover::after,
.brand-network__links a:focus-visible::after {

  width: 100%;

}


/* KEYBOARD ACCESSIBILITY */


.brand-network__links a:focus-visible {

  outline:
    1px solid var(--gold);

  outline-offset: 6px;

}


/* DOT DIVIDERS */


.brand-network__divider {

  color: var(--gold);

  opacity: .48;

  font-size: .7rem;

}


/* ==========================================================
   ENTRANCE ANIMATION
   ========================================================== */


.reveal {

  opacity: 0;

  transform:
    translateY(15px);

  animation:

    rise

    .62s

    cubic-bezier(.2,.75,.25,1)

    forwards;

}


/* LOGO */


.logo-in {

  animation-delay: .10s;

}


/* HEADLINE */


.line-1 {

  animation-delay: .52s;

}


.line-2 {

  animation-delay: .68s;

}


.line-3 {

  animation-delay: .84s;

}


/* COMPANY STATEMENT */


.statement-in {

  animation-delay: 1.35s;

}


/* MANTRA */


.mantra-1 {

  animation-delay: 1.82s;

}


.mantra-dot-1 {

  animation-delay: 1.94s;

}


.mantra-2 {

  animation-delay: 2.06s;

}


.mantra-dot-2 {

  animation-delay: 2.18s;

}


.mantra-3 {

  animation-delay: 2.30s;

}


/* PROFESSIONAL IDENTITY */


.role-in {

  animation-delay: 3.72s;

}


/* BRAND NETWORK ENTERS LAST */


.network-in {

  animation-delay: 4.05s;

}


/* ==========================================================
   KEYFRAMES
   ========================================================== */


@keyframes rise {

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


@keyframes write-signature {

  from {

    width: 0;

  }


  to {

    width: 100%;

  }

}


/* ==========================================================
   TABLET
   ========================================================== */


@media (max-width: 820px) {


  .hero {

    padding-inline: 28px;

  }


  .brand-logo {

    width:
      min(76vw, 410px);

  }


  .headline {

    font-size:
      clamp(3rem, 10.8vw, 5.5rem);

  }


  .statement {

    max-width: 600px;

  }


  .brand-network {

    max-width: 650px;

  }


  .brand-network__label {

    font-size:
      clamp(.78rem, 1.8vw, .95rem);

  }


  .brand-network__links a {

    font-size:
      clamp(.72rem, 1.55vw, .86rem);

  }

}


/* ==========================================================
   MOBILE
   ========================================================== */


@media (max-width: 520px) {


  .hero {

    min-height: 100svh;

    padding:

      38px

      20px

      38px;

    overflow: visible;

  }


  /* LOGO */


  .brand-logo {

    width:
      min(82vw, 340px);

    margin-bottom: 42px;

  }


  /* HEADLINE */


  .headline {

    font-size:
      clamp(2.65rem, 13.4vw, 4.2rem);

    line-height: .9;

  }


  /* STATEMENT */


  .statement {

    max-width: 360px;

    margin-top: 30px;

    font-size: .88rem;

    line-height: 1.65;

  }


  /* MANTRA */


  .mantra {

    margin-top: 28px;

    gap: 9px;

    font-size: .7rem;

    letter-spacing: .12em;

  }


  /* SIGNATURE */


  .signature-wrap {

    width:
      min(72vw, 280px);

    margin-top: 34px;

  }


  .signature {

    width:
      min(72vw, 280px);

  }


  /* PROFESSIONAL IDENTITY */


  .role {

    max-width: 340px;

    line-height: 1.65;

    font-size: .55rem;

    letter-spacing: .12em;

  }


  /* =========================================
     BRAND NETWORK — MOBILE
     ========================================= */


  .brand-network {

    width:
      min(100%, 340px);

    margin-top: 34px;

    padding-top: 26px;

  }


  .brand-network__label {

    margin-bottom: 22px;

    font-size: .76rem;

    letter-spacing: .24em;

  }


  .brand-network__links {

    flex-direction: column;

    gap: 17px;

  }


  .brand-network__links a {

    font-size: .80rem;

    letter-spacing: .10em;

  }


  .brand-network__divider {

    display: none;

  }

}


/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */


@media (max-width: 380px) {


  .headline {

    font-size:
      clamp(2.45rem, 13vw, 3.2rem);

  }


  .statement {

    font-size: .84rem;

  }


  .mantra {

    font-size: .65rem;

    letter-spacing: .09em;

  }


  .brand-network__label {

    font-size: .72rem;

  }


  .brand-network__links a {

    font-size: .76rem;

  }

}


/* ==========================================================
   REDUCED MOTION / ACCESSIBILITY
   ========================================================== */


@media (prefers-reduced-motion: reduce) {


  .reveal {

    opacity: 1;

    transform: none;

    animation: none;

  }


  .signature-reveal {

    width: 100%;

    animation: none;

  }


  .brand-network__links a,
  .brand-network__links a::after {

    transition: none;

  }

}