/* =====================================================
   FLUFFY TITANS
   OUR TITANS PAGE
===================================================== */

:root {

  --forest: #0f4c3a;
  --forest-deep: #082f25;
  --forest-dark: #06271f;

  --moss: #5d8a66;

  --gold: #f2c94c;

  --cream: #f8f3e8;
  --paper: #f1eadb;

  --white: #ffffff;

  --text: #25362f;
  --muted: #68776f;

}


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

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  overflow-x: hidden;

  color: var(--text);

  background: var(--cream);

  font-family:
    "DM Sans",
    sans-serif;
}


body.menu-open {
  overflow: hidden;
}


img {

  display: block;

  width: 100%;
}


a {

  color: inherit;

  text-decoration: none;
}


figure {
  margin: 0;
}


h1,
h2,
h3,
.brand strong {

  font-family:
    "Fraunces",
    serif;
}


.container {

  width:
    min(
      1200px,
      calc(100% - 48px)
    );

  margin: auto;
}


.narrow {

  width:
    min(
      850px,
      calc(100% - 48px)
    );

  margin: auto;

  text-align: center;
}


.section {

  padding:
    115px 0;
}


h2 {

  margin:
    0 0 25px;

  color:
    var(--forest);

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

  line-height:
    0.95;

  letter-spacing:
    -0.045em;
}


h2 em {

  display: block;

  color:
    var(--moss);

  font-weight:
    500;
}


.eyebrow {

  margin:
    0 0 18px;

  color:
    var(--moss);

  font-size:
    0.68rem;

  font-weight:
    700;

  letter-spacing:
    0.21em;

  text-transform:
    uppercase;
}


.light-eyebrow {
  color:
    var(--gold);
}


.gold-eyebrow {
  color:
    var(--gold);
}



/* =====================================================
   HEADER
===================================================== */

.site-header {

  position:
    fixed;

  top:
    0;

  left:
    0;

  z-index:
    1000;

  width:
    100%;

  height:
    88px;

  color:
    var(--forest-dark);

  background:
    rgba(248,243,232,0.98);

  border-bottom:
    1px solid
    rgba(15,76,58,0.12);

  box-shadow:
    0 8px 30px
    rgba(8,47,37,0.08);

  transition:
    height 0.3s ease;
}


.site-header.scrolled {

  height:
    74px;
}


.header-inner {

  width:
    min(
      1320px,
      calc(100% - 48px)
    );

  height:
    100%;

  margin:
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;
}


.brand {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}


.brand-mark {

  width:
    44px;

  height:
    44px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(15,76,58,0.22);

  border-radius:
    50%;

  color:
    var(--forest);

  background:
    rgba(242,201,76,0.16);

  font-family:
    "Fraunces",
    serif;
}


.brand-copy strong,
.brand-copy small {

  display:
    block;
}


.brand-copy small {

  margin-top:
    3px;

  color:
    var(--moss);

  font-size:
    0.55rem;

  letter-spacing:
    0.17em;

  text-transform:
    uppercase;
}


.main-nav {

  display:
    flex;

  align-items:
    center;

  gap:
    27px;
}


.main-nav a {

  font-size:
    0.8rem;

  font-weight:
    600;
}


.main-nav .active {

  color:
    var(--forest);
}


.nav-button {

  padding:
    11px 18px;

  border:
    1px solid
    rgba(15,76,58,0.25);

  border-radius:
    100px;
}


.mobile-menu-button {

  display:
    none;

  border:
    0;

  background:
    transparent;
}


.mobile-menu-button span {

  width:
    24px;

  height:
    2px;

  margin:
    5px;

  display:
    block;

  background:
    var(--forest-dark);

  transition:
    0.25s ease;
}



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

.cats-hero {

  position:
    relative;

  min-height:
    830px;

  padding-top:
    88px;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  color:
    white;

  background:
    var(--forest-dark);
}


.cats-hero-background,
.cats-hero-overlay {

  position:
    absolute;

  inset:
    0;
}


.cats-hero-background {

  background:
    url("forest-hero.jpg")
    center / cover;
}


.cats-hero-overlay {

  background:
    linear-gradient(
      90deg,
      rgba(4,28,22,0.95),
      rgba(4,28,22,0.74) 48%,
      rgba(4,28,22,0.26)
    );
}


.cats-hero-light {

  position:
    absolute;

  right:
    12%;

  top:
    17%;

  width:
    430px;

  height:
    430px;

  border-radius:
    50%;

  background:
    rgba(242,201,76,0.15);

  filter:
    blur(65px);
}


.cats-hero-layout {

  position:
    relative;

  z-index:
    5;

  display:
    grid;

  grid-template-columns:
    0.82fr 1.18fr;

  align-items:
    center;

  gap:
    70px;
}


.cats-hero-copy h1 {

  margin:
    0;

  font-size:
    clamp(
      5rem,
      9vw,
      9rem
    );

  line-height:
    0.75;

  letter-spacing:
    -0.06em;
}


.cats-hero-copy h1 span {

  display:
    block;

  color:
    var(--gold);
}


.cats-hero-copy >
p:not(.eyebrow) {

  max-width:
    540px;

  margin-top:
    35px;

  color:
    rgba(255,255,255,0.78);

  font-size:
    1.08rem;

  line-height:
    1.8;
}


.hero-button {

  margin-top:
    20px;

  padding:
    15px 24px;

  display:
    inline-flex;

  border-radius:
    100px;

  color:
    var(--forest-dark);

  background:
    var(--gold);

  font-weight:
    700;
}


.cats-hero-photo {

  height:
    530px;

  overflow:
    hidden;

  border:
    7px solid
    rgba(255,255,255,0.14);

  border-radius:
    48% 48% 28px 28px;

  box-shadow:
    0 30px 70px
    rgba(0,0,0,0.3);
}


.cats-hero-photo img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.hero-wave {

  position:
    absolute;

  z-index:
    7;

  bottom:
    -1px;

  width:
    100%;

  height:
    100px;
}


.hero-wave svg {

  width:
    100%;

  height:
    100%;
}


.hero-wave path {

  fill:
    var(--cream);
}



/* =====================================================
   INTRO
===================================================== */

.intro-section
p:not(.eyebrow) {

  color:
    var(--muted);

  font-size:
    1.08rem;

  line-height:
    1.85;
}



/* =====================================================
   TITAN PROFILES
===================================================== */

.cat-profile {

  padding:
    125px 0;
}


.king-profile {

  color:
    white;

  background:
    var(--forest-deep);
}


.queen-profile {

  background:
    var(--paper);
}


.cat-profile-layout {

  display:
    grid;

  grid-template-columns:
    1fr 0.9fr;

  align-items:
    center;

  gap:
    90px;
}


.cat-profile-layout.reverse {

  grid-template-columns:
    0.9fr 1fr;
}


.reverse
.cat-photo-wrap {

  order:
    2;
}


.reverse
.cat-copy {

  order:
    1;
}


.cat-photo-wrap {

  position:
    relative;
}


.cat-photo {

  height:
    650px;

  overflow:
    hidden;

  box-shadow:
    0 25px 65px
    rgba(0,0,0,0.18);
}


.king-photo {

  border-radius:
    48% 48% 22px 22px;

  border:
    1px solid
    rgba(242,201,76,0.35);
}


.queen-photo {

  border-radius:
    48% 48% 22px 22px;

  border:
    1px solid
    rgba(15,76,58,0.18);
}


.cat-photo img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.king-photo img {

  object-position:
    center 18%;
}


.queen-photo img {

  object-position:
    47% 36%;
}


.cat-number {

  position:
    absolute;

  right:
    -20px;

  bottom:
    35px;

  width:
    82px;

  height:
    82px;

  display:
    grid;

  place-items:
    center;

  border:
    7px solid
    currentColor;

  border-radius:
    50%;

  color:
    var(--forest-deep);

  background:
    var(--gold);

  font-family:
    "Fraunces",
    serif;

  font-size:
    1.4rem;
}


.king-profile h2 {

  color:
    white;
}


.profile-lead {

  font-family:
    "Fraunces",
    serif;

  font-size:
    1.45rem !important;
}


.cat-copy >
p:not(.eyebrow) {

  color:
    var(--muted);

  line-height:
    1.8;
}


.king-profile
.cat-copy >
p:not(.eyebrow) {

  color:
    rgba(255,255,255,0.67);
}


.poly-badge {

  width:
    fit-content;

  margin:
    -5px 0 20px;

  padding:
    8px 13px;

  border:
    1px solid
    rgba(15,76,58,0.18);

  border-radius:
    100px;

  background:
    rgba(255,255,255,0.4);

  font-size:
    0.65rem;

  font-weight:
    700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.profile-details {

  margin-top:
    35px;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    12px;
}


.profile-details div {

  padding:
    18px;

  border:
    1px solid
    rgba(15,76,58,0.13);

  background:
    rgba(255,255,255,0.3);
}


.king-profile
.profile-details div {

  border-color:
    rgba(255,255,255,0.12);

  background:
    rgba(255,255,255,0.05);
}


.profile-details span,
.profile-details strong {

  display:
    block;
}


.profile-details span {

  margin-bottom:
    5px;

  opacity:
    0.55;

  font-size:
    0.61rem;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}



/* =====================================================
   FOREST BREAK
===================================================== */

.forest-break {

  position:
    relative;

  min-height:
    540px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  color:
    white;
}


.forest-break-photo,
.forest-break-shade {

  position:
    absolute;

  inset:
    0;
}


.forest-break-photo {

  background:
    url("forest-life.jpg")
    center / cover;
}


.forest-break-shade {

  background:
    rgba(4,33,25,0.7);
}


.forest-break-copy {

  position:
    relative;

  z-index:
    3;

  width:
    min(
      760px,
      calc(100% - 40px)
    );

  text-align:
    center;
}


.forest-break-copy >
span {

  color:
    var(--gold);

  font-size:
    2rem;
}


.forest-break-copy h2 {

  margin-top:
    15px;

  color:
    white;
}


.forest-break-copy h2 em {

  color:
    var(--gold);
}


.forest-break-copy p {

  max-width:
    600px;

  margin:
    auto;

  color:
    rgba(255,255,255,0.7);

  line-height:
    1.8;
}



/* =====================================================
   COMING TITANS
===================================================== */

.coming-section {

  background:
    linear-gradient(
      #e7f0e4,
      var(--cream)
    );
}


.coming-layout {

  display:
    grid;

  grid-template-columns:
    0.8fr 1.2fr;

  gap:
    80px;

  align-items:
    center;
}


.coming-copy
p:not(.eyebrow) {

  color:
    var(--muted);

  line-height:
    1.8;
}


.coming-cards {

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:
    15px;

  align-items:
    center;
}


.coming-card {

  min-height:
    300px;

  padding:
    30px 20px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  border:
    1px solid
    rgba(15,76,58,0.15);

  background:
    rgba(255,255,255,0.55);
}


.coming-card-gold {

  min-height:
    350px;

  background:
    rgba(242,201,76,0.2);

  border-color:
    rgba(226,177,60,0.4);
}


.coming-card >
span {

  color:
    var(--gold);

  font-size:
    2rem;
}


.coming-card h3 {

  margin:
    18px 0 8px;

  color:
    var(--forest);

  font-size:
    1.8rem;
}


.coming-card p {

  color:
    var(--muted);

  font-size:
    0.85rem;
}



/* =====================================================
   NEXT GENERATION
===================================================== */

.future-section {

  padding:
    120px 0;

  color:
    white;

  background:
    #1b263b;
}


.future-layout {

  display:
    grid;

  grid-template-columns:
    1fr 0.75fr;

  align-items:
    center;

  gap:
    80px;
}


.future-section h2 {

  color:
    white;
}


.future-section h2 em {

  color:
    var(--gold);
}


.future-copy
p:not(.eyebrow) {

  color:
    rgba(255,255,255,0.65);

  line-height:
    1.8;
}


.gold-button {

  margin-top:
    20px;

  padding:
    15px 25px;

  display:
    inline-flex;

  border-radius:
    100px;

  color:
    var(--forest-dark);

  background:
    var(--gold);

  font-weight:
    700;
}


.future-circle {

  width:
    330px;

  height:
    330px;

  margin:
    auto;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(242,201,76,0.4);

  border-radius:
    50%;

  text-align:
    center;
}


.future-circle span {

  margin-bottom:
    14px;

  color:
    var(--gold);

  font-size:
    2rem;
}


.future-circle strong {

  max-width:
    220px;

  font-family:
    "Fraunces",
    serif;

  font-size:
    1.9rem;
}



/* =====================================================
   FOOTER
===================================================== */

.site-footer {

  padding:
    75px 0 25px;

  color:
    rgba(255,255,255,0.65);

  background:
    var(--forest-dark);
}


.footer-grid {

  display:
    grid;

  grid-template-columns:
    1.4fr 0.6fr 0.6fr;

  gap:
    55px;
}


.footer-grid h3 {

  margin-top:
    0;

  color:
    white;

  font-size:
    2rem;
}


.footer-grid p {

  max-width:
    380px;

  line-height:
    1.7;
}


.footer-grid a {

  margin-bottom:
    12px;

  display:
    block;
}


.footer-bottom {

  width:
    min(
      1200px,
      calc(100% - 48px)
    );

  margin:
    55px auto 0;

  padding-top:
    22px;

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

  font-size:
    0.72rem;
}


.footer-bottom a {

  color:
    var(--gold);
}



/* =====================================================
   REVEAL
===================================================== */

.reveal {

  opacity:
    0;

  transform:
    translateY(30px);

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}


.reveal.visible {

  opacity:
    1;

  transform:
    none;
}



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

@media (max-width: 950px) {


  .mobile-menu-button {

    display:
      block;

    position:
      relative;

    z-index:
      40;
  }


  .main-nav {

    position:
      fixed;

    top:
      0;

    right:
      -100%;

    width:
      min(
        380px,
        90vw
      );

    height:
      100svh;

    padding:
      125px 35px;

    flex-direction:
      column;

    align-items:
      stretch;

    color:
      white;

    background:
      var(--forest-dark);

    transition:
      right 0.3s ease;
  }


  .main-nav.open {

    right:
      0;
  }


  .main-nav a {

    padding:
      13px 0;

    color:
      white;

    border-bottom:
      1px solid
      rgba(255,255,255,0.08);
  }


  .cats-hero-layout,
  .cat-profile-layout,
  .cat-profile-layout.reverse,
  .coming-layout,
  .future-layout {

    grid-template-columns:
      1fr;
  }


  .reverse
  .cat-photo-wrap,
  .reverse
  .cat-copy {

    order:
      initial;
  }


  .cats-hero-copy {

    padding-top:
      60px;
  }


  .cats-hero-photo {

    height:
      470px;
  }


  .coming-cards {

    margin-top:
      20px;
  }

}



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

@media (max-width: 650px) {


  .site-header {

    height:
      74px;
  }


  .section,
  .cat-profile,
  .future-section {

    padding:
      80px 0;
  }


  .cats-hero {

    min-height:
      930px;

    padding-top:
      74px;
  }


  .cats-hero-layout {

    gap:
      35px;
  }


  .cats-hero-copy {

    padding-top:
      70px;

    text-align:
      center;
  }


  .cats-hero-copy h1 {

    font-size:
      5rem;
  }


  .cats-hero-copy >
  p:not(.eyebrow) {

    margin:
      25px auto;
  }


  .cats-hero-photo {

    height:
      400px;

    border-radius:
      42% 42% 22px 22px;
  }


  .cat-photo {

    height:
      500px;
  }


  .cat-number {

    right:
      10px;
  }


  .profile-details {

    grid-template-columns:
      1fr;
  }


  .coming-cards {

    grid-template-columns:
      1fr;
  }


  .coming-card,
  .coming-card-gold {

    min-height:
      220px;
  }


  .future-circle {

    width:
      260px;

    height:
      260px;
  }


  .footer-grid {

    grid-template-columns:
      1fr;
  }

}