/* ==========================================================================
   Lifering Studios
   Layout system mirrors lfgstudio.com: an 8px root rem (7px on mobile), a
   135rem content wrapper, and the signature "offset rectangle" card — a grey
   panel nudged 2rem down behind a white one, both with a 1px #66696E hairline
   and a 10px radius. The palette swaps LFG's green/yellow for life-ring red
   and open-water aqua, keeping the same light/saturated tonal relationships.
   ========================================================================== */

:root{
  /* neutrals carried over from the reference system */
  --white:#ffffff;
  --grey1:#66696e;      /* hairline border */
  --grey2:#eceff4;      /* offset panel + section wash */
  --grey3:#999999;
  --grey5:#8e8e8e;
  --black1:#1e1e1e;
  --black2:#343434;
  --black4:#2d2d2d;

  /* life ring + open water */
  --navy:#00092c;
  --aqua1:#8fe8f5;      /* primary accent (fills LFG's green1 role) */
  --aqua2:#0ab4bb;      /* accent hover (fills green2's role) */
  --aqua3:#5ed4e6;
  --deep:#06809a;
  --red:#ed5656;
  --red2:#ff7171;
  --sand:#ffed7d;

  --content-wrapper:135rem;

  font-family:Figtree,Helvetica,Arial,sans-serif;
  line-height:1;
  font-weight:400;
  font-size:8px;
  background:#fff;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

*,*::before,*::after{box-sizing:border-box;}
body{margin:0;color:var(--black1);overflow-x:hidden;background:var(--white);}
img{display:block;max-width:100%;}
a{color:inherit;}

.content-wrapper{width:var(--content-wrapper);max-width:calc(100% - 4rem);margin:0 auto;}

/* display face: heavy, uppercase, tight leading — as on the reference */
.display{font-weight:900;text-transform:uppercase;line-height:.85;letter-spacing:-.01em;}

/* the offset rectangle pair ---------------------------------------------- */
.panel{position:relative;}
.panel .grey-rectangle{
  position:absolute;inset:2rem 0 -2rem 0;
  background-color:var(--grey2);
  border:1px solid var(--grey1);
  border-radius:10px;
}
.panel .white-rectangle{
  position:relative;
  background-color:var(--white);
  border:1px solid var(--grey1);
  border-radius:10px;
}
.panel.dark .grey-rectangle{background-color:var(--black2);border-color:var(--grey3);border-radius:1rem;}
.panel.dark .white-rectangle{background-color:var(--black1);border-color:var(--grey1);border-radius:1rem;color:var(--white);}

/* the window-dot motif from the reference hero --------------------------- */
.function-buttons{
  position:absolute;left:2rem;top:2rem;width:5rem;height:1.25rem;
  background:url("data:image/svg+xml,%3csvg width='40' height='10' viewBox='0 0 40 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='5' cy='5' r='4.5' fill='%23ED5656' stroke='%2366696E'/%3e%3ccircle cx='20' cy='5' r='4.5' fill='%23FFED7D' stroke='%2366696E'/%3e%3ccircle cx='35' cy='5' r='4.5' fill='%238FE8F5' stroke='%2366696E'/%3e%3c/svg%3e") no-repeat;
  background-size:contain;
}

/* buttons ---------------------------------------------------------------- */
.button{
  padding:1.4rem 3rem;border:.1rem solid var(--navy);border-radius:5rem;
  color:var(--black1);font-weight:800;font-size:1.5rem;letter-spacing:.06em;
  background-color:var(--aqua1);text-transform:uppercase;text-decoration:none;
  width:fit-content;display:inline-block;cursor:pointer;
  --btn-shade:#0a8f9e;
  box-shadow:0 .6rem 0 var(--btn-shade);
  transition:background-color .18s ease,transform .08s ease,box-shadow .08s ease;
}
.button:hover{background-color:var(--aqua2);transform:translateY(.2rem);box-shadow:0 .4rem 0 var(--btn-shade);}
.button:active{transform:translateY(.6rem);box-shadow:0 0 0 var(--btn-shade);}
.button:focus-visible{outline:.3rem solid var(--deep);outline-offset:.3rem;}

.button.solid-red{background-color:var(--red);color:var(--white);--btn-shade:#a83a3a;}
.button.solid-red:hover{background-color:var(--red2);}

.button.grey{background-color:var(--grey5);cursor:default;--btn-shade:#6b6b6b;}
.button.grey:hover{transform:none;box-shadow:0 .6rem 0 var(--btn-shade);background-color:var(--grey5);}

/* reveal on scroll (the reference uses framer-motion for this) ------------ */
.reveal{opacity:0;transform:translateY(2rem);transition:opacity .9s ease,transform .9s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;}
}

/* ============================ HEADER ==================================== */
.Header{padding-top:2rem;padding-bottom:6rem;position:relative;z-index:20;}
.Header .content-wrapper{display:flex;align-items:center;gap:2rem;}
.logo{display:flex;align-items:center;gap:1.2rem;text-decoration:none;}
.logo .mark{width:4.2rem;height:4.2rem;flex:0 0 auto;}
.logo .mark img{width:100%;height:100%;}
.logo .word{font-weight:900;font-size:2.4rem;letter-spacing:-.02em;text-transform:uppercase;line-height:1;}
.logo .word small{display:block;font-size:.95rem;font-weight:700;letter-spacing:.42em;color:var(--grey1);margin-top:.35rem;}
.Header nav{margin-left:auto;display:flex;align-items:center;gap:3rem;}
.Header nav a{font-size:1.5rem;font-weight:700;text-decoration:none;text-transform:uppercase;letter-spacing:.06em;}
.Header nav a:not(.button):hover{color:var(--deep);}

/* ============================ HERO ====================================== */
.AboveFold{position:relative;padding-bottom:6rem;}
.AboveFold .white-rectangle{min-height:68rem;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;}
.AboveFold .hero-copy{padding:8rem 2rem 8rem 6rem;text-align:center;position:relative;z-index:2;}
.AboveFold .above-title{font-size:1.6rem;line-height:1.2;letter-spacing:.4rem;text-transform:uppercase;font-weight:700;color:var(--grey1);}
.AboveFold .title{font-size:9rem;margin:3rem 0 0;}
.AboveFold .subtitle{font-size:1.8rem;line-height:1.4;margin:4rem auto 0;max-width:34rem;}
.AboveFold .hero-actions{margin-top:4rem;display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;}
.AboveFold .hero-image{
  align-self:end;width:100%;height:57.5rem;
  background:url(assets/hero-ring.svg) no-repeat center bottom;background-size:contain;
}
/* the ring rides the swell */
.AboveFold .hero-image{animation:bob 6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-1.4rem) rotate(1deg);}}

/* rising bubbles over the hero card */
.bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:10px;}
.bubbles i{
  position:absolute;bottom:-6rem;border-radius:50%;
  border:.18rem solid var(--navy);opacity:0;
  animation:rise linear infinite;
}
@keyframes rise{
  0%{transform:translateY(0) translateX(0);opacity:0;}
  12%{opacity:.55;}
  85%{opacity:.35;}
  100%{transform:translateY(-62rem) translateX(2rem);opacity:0;}
}

/* ============================ BLURB ===================================== */
.Blurb{
  background:url(assets/ripples.svg) var(--sand) no-repeat center bottom 4rem;
  background-size:90rem auto;
  padding:18rem 0 30rem;text-align:center;position:relative;
}
.Blurb .content{
  font-size:4.4rem;line-height:1.35;max-width:90rem;margin:0 auto;font-weight:500;
}
.Blurb .content .highlight{
  background:var(--white);padding:.4rem 1.2rem;border-radius:1rem;
  box-shadow:0 .2rem 0 var(--navy);display:inline-block;
}

/* ============================ STATS ===================================== */
.Stats{background-color:var(--black1);width:100%;padding:12rem 0;}
.Stats .content-wrapper{display:grid;grid-template-columns:repeat(3,1fr);gap:5rem;}
.Stats .item{position:relative;}
.Stats .item .white-rectangle{
  display:flex;align-items:center;gap:2rem;padding:2.6rem 3rem;min-height:9rem;text-transform:uppercase;
}
.Stats .item .left{font-weight:900;font-size:3.6rem;line-height:1;white-space:nowrap;}
.Stats .item .right{font-size:1.5rem;letter-spacing:.32rem;line-height:1.3;color:var(--aqua1);}

/* ============================ WORK ====================================== */
.Work{padding:14rem 0 12rem;}
.Work .intro{display:flex;gap:6rem;align-items:flex-start;}
.Work .intro .left{width:45rem;flex:0 0 auto;}
.Work .intro .title{font-size:6.4rem;}
.Work .intro .right{font-size:1.6rem;line-height:1.6;color:var(--black2);padding-top:.6rem;}

/* horizontally scrolling game tiles */
.marquee-container{
  width:100%;overflow:hidden;position:relative;margin-top:8rem;
  -webkit-mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent);
          mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent);
}
.marquee-track{display:flex;gap:2.5rem;width:max-content;animation:scroll 46s linear infinite;padding:2rem 0;}
.marquee-track:hover{animation-play-state:paused;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.game-tile{
  position:relative;width:52rem;height:31.6rem;flex:0 0 auto;
  border:1px solid var(--grey1);border-radius:10px;overflow:hidden;
  background-size:cover;background-position:center;
  transition:transform .25s ease,box-shadow .25s ease;
}
.game-tile:hover{transform:translateY(-.8rem);box-shadow:0 1.6rem 3rem rgba(0,9,44,.18);}
.game-tile .meta{
  position:absolute;left:0;right:0;bottom:0;padding:2.4rem;
  background:linear-gradient(to top,rgba(0,9,44,.88),rgba(0,9,44,0));color:var(--white);
}
.game-tile .meta .name{font-size:2.8rem;font-weight:900;text-transform:uppercase;line-height:.9;}
.game-tile .meta .plays{font-size:1.3rem;letter-spacing:.2rem;text-transform:uppercase;margin-top:.9rem;color:var(--aqua1);}
.game-tile .tag{
  position:absolute;top:1.6rem;left:1.6rem;background:var(--white);border:1px solid var(--navy);
  border-radius:5rem;padding:.6rem 1.4rem;font-size:1.1rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
}

/* three-up approach row */
.approachRow{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;margin-top:10rem;}
.approachRow .item{display:flex;gap:1.6rem;align-items:flex-start;}
.approachRow .item .icon{width:6.6rem;height:6.6rem;flex:0 0 auto;background-size:contain;background-repeat:no-repeat;}
.approachRow .item .icon.depth{background-image:url(assets/icon-depth.svg);}
.approachRow .item .icon.dial{background-image:url(assets/icon-dial.svg);}
.approachRow .item .icon.target{background-image:url(assets/icon-target.svg);}
.approachRow .item .text{font-size:1.6rem;line-height:1.5;}
.approachRow .item .text .title{font-weight:800;display:block;margin-bottom:.6rem;}

/* ============================ WHAT WE DO ================================ */
.Offer{background-color:var(--black1);padding:14rem 0;color:var(--white);}
/* Stats and Offer are both black; when Work is hidden they butt together,
   so close the gap rather than stacking both sections' padding. */
.Stats + .Offer{padding-top:6rem;}
.Offer .head{display:flex;gap:6rem;align-items:flex-end;margin-bottom:8rem;}
.Offer .head .title{font-size:7.5rem;width:55rem;flex:0 0 auto;}
.Offer .head .subtitle{font-size:1.8rem;line-height:1.6;color:#cfd4dd;}
.featuresWrapper{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem 3rem;}
.featuresWrapper .card{position:relative;}
.featuresWrapper .card .grey-rectangle{position:absolute;inset:1rem 0 -1rem 0;background:var(--black2);border:.1rem solid var(--grey1);border-radius:1rem;}
.featuresWrapper .card .white-rectangle{
  position:relative;display:flex;gap:1.5rem;align-items:flex-start;
  background:#262626;border:.1rem solid var(--grey1);border-radius:1rem;padding:2.5rem;min-height:16rem;
}
.featuresWrapper .card .cardLeft{width:7rem;height:7rem;flex:0 0 auto;background-size:contain;background-repeat:no-repeat;}
.featuresWrapper .card .cardTitle{font-weight:800;font-size:1.8rem;color:var(--white);}
.featuresWrapper .card .cardSubtitle{font-size:1.4rem;line-height:1.5;margin-top:1rem;color:#b6bcc7;}

/* ============================ CREW ====================================== */
.Crew{
  background:url(assets/crew-bg.svg) var(--aqua1) no-repeat center;
  background-size:cover;padding:12rem 0;position:relative;
}
.Crew .white-rectangle{display:grid;grid-template-columns:47rem 1fr;align-items:center;min-height:49rem;}
.Crew .left{
  height:40rem;margin:4rem 0 4rem 2rem;
  background:url(assets/crew-art.svg) no-repeat center;background-size:contain;
}
.Crew .right{padding:6rem 6rem 6rem 2rem;text-align:center;}
.Crew .right .title{font-size:7rem;}
.Crew .right .subtitle{font-size:1.8rem;line-height:1.6;margin-top:3rem;}
.Crew .right .ring-icon{
  width:8.5rem;height:8.5rem;margin:3rem auto 0;
  background:url(assets/ring-icon.svg) no-repeat center;background-size:contain;
  animation:spin 14s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============================ BOTTOM FOLD =============================== */
.BottomFold{background-color:var(--grey2);padding:14rem 0 16rem;}
.BottomFold section + section{margin-top:14rem;}

.Brands .white-rectangle{padding:6rem 4rem 5rem;text-align:center;}
.Brands .title{font-size:8.4rem;}
.Brands .subtitle{font-size:1.8rem;line-height:1.5;max-width:50rem;margin:3rem auto 0;}
.logo-wall{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;margin-top:5rem;}
.logo-slot{
  border:.2rem dashed var(--grey3);border-radius:1rem;
  width:18rem;height:7rem;display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--grey3);
}

.Contact .white-rectangle{padding:8rem 4rem 6rem;text-align:center;}
.Contact .title{font-size:6.4rem;}
.Contact .title .highlight{background:var(--aqua1);padding:.4rem 1.4rem;border-radius:1rem;display:inline-block;}
.Contact .subtitle{font-size:1.8rem;line-height:1.5;max-width:50rem;margin:3rem auto 0;}
.Contact form{display:flex;gap:1.5rem;max-width:56rem;margin:4rem auto 0;flex-wrap:wrap;justify-content:center;}
.Contact input{
  flex:1 1 26rem;border:1px solid var(--grey1);border-radius:5rem;padding:1.6rem 2.4rem;
  font:inherit;font-size:1.6rem;background:var(--white);color:var(--black1);
}
.Contact input:focus{outline:2px solid var(--deep);outline-offset:2px;}
.Contact .note{font-size:1.3rem;color:var(--grey1);margin-top:2rem;}

/* ============================ WAVE DIVIDER ============================== */
.wave-divider{
  height:4.5rem;width:100%;
  background:url("data:image/svg+xml,%3csvg width='240' height='40' viewBox='0 0 240 40' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0,20 q30,-16 60,0 t60,0 t60,0 t60,0 L240,40 L0,40 Z' fill='%231E1E1E'/%3e%3c/svg%3e") repeat-x bottom;
  background-size:24rem 4rem;
  animation:drift 14s linear infinite;
}
@keyframes drift{from{background-position-x:0;}to{background-position-x:-24rem;}}
.wave-divider.aqua{background-image:url("data:image/svg+xml,%3csvg width='240' height='40' viewBox='0 0 240 40' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0,20 q30,-16 60,0 t60,0 t60,0 t60,0 L240,40 L0,40 Z' fill='%238FE8F5'/%3e%3c/svg%3e");}
.wave-divider.grey{background-image:url("data:image/svg+xml,%3csvg width='240' height='40' viewBox='0 0 240 40' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0,20 q30,-16 60,0 t60,0 t60,0 t60,0 L240,40 L0,40 Z' fill='%23ECEFF4'/%3e%3c/svg%3e");}
.wave-divider.flip{transform:scaleY(-1);}

/* rope rule */
.rope-rule{
  height:1.4rem;width:100%;
  background:url(assets/rope.svg) repeat-x center;background-size:12rem 1.4rem;
}

/* ============================ FOOTER ==================================== */
.Footer{background-color:var(--aqua1);position:relative;padding:22rem 0 6rem;overflow:hidden;}
.Footer .waves{
  position:absolute;left:0;right:0;top:-6rem;height:42rem;
  background:url(assets/footer-waves.svg) no-repeat center top;background-size:cover;opacity:.9;
}
.Footer .content-wrapper{position:relative;z-index:2;display:flex;align-items:flex-end;gap:3rem;flex-wrap:wrap;}
.Footer .contact{margin-left:auto;font-size:2.2rem;text-align:right;}
.Footer .contact a{text-decoration:none;color:var(--black1);font-weight:800;}
.Footer .contact a:hover{color:var(--deep);}
.Footer .contact .small{display:block;font-size:1.3rem;font-weight:400;color:var(--black2);margin-top:1.2rem;letter-spacing:.06em;}

/* ============================ RESPONSIVE ================================ */
@media (max-width:1180px){
  .AboveFold .title{font-size:7rem;}
  .Brands .title{font-size:6.4rem;}
  .Offer .head .title{font-size:6rem;width:42rem;}
  .Crew .white-rectangle{grid-template-columns:36rem 1fr;}
  .Crew .right .title{font-size:5.6rem;}
}

@media (max-width:900px){
  .Stats .content-wrapper,.featuresWrapper,.approachRow{grid-template-columns:1fr;}
  .Work .intro,.Offer .head{flex-direction:column;gap:3rem;}
  .Work .intro .left,.Offer .head .title{width:100%;}
  .AboveFold .white-rectangle{grid-template-columns:1fr;}
  .AboveFold .hero-copy{padding:8rem 2rem 2rem;}
  /* fill the card width so the water meets both edges instead of
     floating as a boxed illustration */
  .AboveFold .hero-image{
    height:37rem;
    background-size:cover;
    background-position:center bottom;
  }
  .Crew .white-rectangle{grid-template-columns:1fr;}
  .Crew .left{margin:4rem auto 0;width:32rem;height:32rem;}
  .Crew .right{padding:3rem 3rem 6rem;}
}

@media (max-width:760px){
  :root{font-size:7px;}
  .Header nav a:not(.button){display:none;}
  .AboveFold .above-title{font-size:1.2rem;letter-spacing:.28rem;}
  .AboveFold .title{font-size:5rem;}
  .AboveFold .subtitle{font-size:1.7rem;}
  .Blurb{padding:10rem 0 18rem;background-size:54rem auto;}
  .Blurb .content{font-size:2.4rem;line-height:1.5;width:88%;}
  .Work .intro .title{font-size:4.6rem;}
  .Brands .title{font-size:4rem;}
  .Contact .title{font-size:4rem;line-height:1.1;}
  .Crew .right .title{font-size:4.6rem;}
  .Offer .head .title{font-size:4.6rem;}
  .game-tile{width:34rem;height:20.7rem;}
  .game-tile .meta .name{font-size:2.2rem;}
  .Footer{padding-top:18rem;}
  .Footer .content-wrapper{flex-direction:column;align-items:center;text-align:center;}
  .Footer .contact{margin-left:0;text-align:center;}
  .Stats .item .white-rectangle{flex-direction:column;align-items:flex-start;gap:1rem;}
}