:root {

/* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */



  --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
  --step-6: clamp(3.3592rem, 2.7828rem + 2.5621vw, 4.7684rem);
  --step-7: clamp(4.0311rem, 3.2418rem + 3.508vw, 5.9605rem);
  --step-8: clamp(4.8373rem, 3.7682rem + 4.7514vw, 7.4506rem);


  /* Common Style Variables */

  /* Color */
  --color-crimson: #e2282e;
  --color-darksalmon: #f79480;
  --color-dimgray: #4b3335;
  --color-gold: #ffc403;
  --color-gray: #332526;
  --color-royalblue-100: #1177fc;
  --color-royalblue-200: #1177fb;

  --color-light-pink: #fbf2f2;
  --color-tomato: #e83727;
  --color-white: #fff;

  /* Gap */
  --gap-16: 1rem;
  --gap-18: 1.125rem;
  --gap-20: 1.25rem;
  --gap-24: 1.5rem;
  --gap-32: 2rem;
  --gap-40: 2.5rem;

  /* Padding */
  --padding-0: 0rem;
  --padding-10: 0.625rem;
  --padding-20: 1.25rem;
  --padding-21: 1.312rem;
  --padding-31: 1.937rem;
  --padding-32: 2rem;
  --padding-36: 2.25rem;
  --padding-48: 3rem;
  --padding-64: 4rem;
  --padding-80: 5rem;

  /* BorderRadius */
  --br-6: 6px;

  /* Font */
  --font-geist: 'Geist', Arial, sans-serif;
  --font-main: 'GT Alpina Condensed', Arial, sans-serif;
  --font-inherit: inherit, Arial, sans-serif;
  --font-pixelify-sans: 'Pixelify Sans', Arial, sans-serif;

  /* FontSize */
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-21: 1.312rem;
  --fs-26: 1.625rem;
  --fs-29: 1.812rem;
  --fs-36: 2.25rem;
  --fs-38: 2.375rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;

  /* WidthHeights */
  --height-104: 6.5rem;
  --height-534: 33.375rem;
  --height-31_5: 1.968rem;
  --height-319_5: 19.968rem;
  --height-9_1: 0.568rem;
  --width-32: 2rem;
  --width-104: 6.5rem;
  --width-31_5: 1.968rem;
  --width-9_1: 0.568rem;

  /* LineHeights */
  --lh-25: 1.562rem;
  --lh-28: 1.75rem;
  --lh-36: 2.25rem;

  /* LetterSpacings */
  --ls--0_02: -0.02;
  --ls--0_03: -0.03;

  --left-0: 0rem;
  --left-9_1: 0.568rem;
  --top-0: 0rem;
  --top-1: 0.062rem;
  --top-457: 28.562rem;
  --top-18_2: 1.137rem;
}



@font-face {
  font-family: 'GT Alpina Condensed';
  src: url(public/fonts/GT-Alpina-Condensed-Regular.woff2);
}

html{font-size: 16px;}

body {

  margin: 0;
  line-height: 150%;
  font-size: 16px;
font-size: var(--step-0);
}

p{margin-block-start: 0}


/* --- Base Layout & Presentation --- */


:root {
  --header-height: 70px;
}
* {
   box-sizing: border-box;
}

.wrapper{

  max-width: 1680px;
  width:100%;
  margin:0 auto;
  padding-inline: 4rem;
}


.site-header {

  position: sticky;
  top: 0;
  height: var(--header-height);
  z-index: 100;
      background-color: var(--color-light-pink);
        display: flex;
  align-items: center;

}


.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  

}


section{padding-block: 4rem}

/* Reset default browser styles for elements with popover attributes */


[popover] {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  overflow: visible;
}


.nav-links {
  list-style: none;
  display: flex;
  gap: 2.5rem;
  margin: 0;
  padding: 0;
  align-items: center;
}


.nav-item {
  color: var(--color-gray);
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.nav-logo{
font-family: var(--font-main);
color:var(--color-gray);
text-decoration: none;
font-size: var(--step-1);

}
/* --- Focus States for Keyboard Operators --- */


.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: #0066cc;
  color: white;
  padding: 1rem;
  z-index: 1001;
}


.skip-link:focus { top: 0; }


*:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
  border-radius: 4px;
}


h1, h2, h3{font-family: var(--font-main); font-weight: 400; margin-block: 0; line-height: 100%; }


h1{   font-size: var(--step-8);letter-spacing: -5px; line-height: 100%; margin-block: 0}


h2{font-size: var(--step-5); letter-spacing: -2px; max-width: 20ch}
h3{font-size: var(--step-3); letter-spacing: -1px;}

main{padding-block: 8rem}


.header {
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


.header {
  width: 100%;
  height: 4.5rem;
  padding: var(--padding-0) var(--padding-64);
  
  max-width: 100%;
}



.content {
  display: flex;
  align-items: center;
}


.bite-size {
  letter-spacing: -0.03em;
  line-height: 76%;
}


.button {
  display: flex;
  align-items: center;
  justify-content: center;
}


.button {
  cursor: pointer;
  border: 0;
  padding: 0.5rem var(--padding-20);
  background-color: var(--color-gray);
  border-radius: var(--br-6);
}


.hero{
  background-color: var(--color-light-pink);
  
  height:80svh;
  max-height: 1080px;
  display: flex;
    align-items: flex-end;
    padding-block:8rem;
}


.hero > div {
  width: 100%;
 display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end
  
}

.hero-description{font-size: var(--step-0); line-height: 150%; max-width: 50ch}
.grid-2-columns{

 display: grid;
 grid-template-columns: 1fr  1fr;
     

}
.grid-3-columns {
  width: 100%;
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
      align-items: start;
}


.tagline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}




.bite-size-solutions {
  color: var(--color-royalblue-200);
  l
  
}

.logofont{
  font-family: var(--font-pixelify-sans);
}

.lorem-ipsum-dolor-container {
  position: relative;
  font-size: var(--fs-20);
  line-height: 150%;
  display: inline-block;
  flex-shrink: 0;
  font-family: var(--font-geist);
}


.big-picture-hr-thinking {
  line-height: 150%;
}


.button-cta {
  position: relative;
  line-height: 150%;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1rem;
  background-color: var(--color-gray);
  color: var(--color-white);
  border-radius: .5rem;
  font-size: var(--step--1);
}


.hero-text{display: flex;
flex-direction: column;
gap:1rem;
    align-items: flex-start;}

.main-illustration {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;

  
}

.main-illustration > svg {max-width: 80svw;}

.visual-layout{

  position: relative;

}


.abstract-shape-a-parent {

  position: relative;
  width:calc(var(--width-104) * 5);
  aspect-ratio: 1 / 1;
  bottom:2.6rem;
}


.abstract-shape-a {
  position: relative;
  top: 28.563rem;
  left: 13rem;
  background-color: var(--color-gold);
  width: var(--width-104);
  height: var(--height-104);
}


.frame-child {
  top: 0;
  left: 31rem;
  background-color: var(--color-snow-100);
  display: none;
}


.abstract-shape-b,
.frame-child,
.frame-item {
  position: relative;
  width: var(--width-104);
  height: var(--height-104);
}


.abstract-shape-b {
  top: 28.563rem;
  left: 19.5rem;
  background-color: var(--color-gray);
}


.frame-item {
  top: 0;
  left: 0;
  background-color: var(--color-tomato);
  display: none;
}


.image-panel-a {
  position: relative;
  top: 15.625rem;
  left: 26rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.abstract-shape-c,
.image-panel-b {
  width: var(--width-104);
  position: relative;
}


.abstract-shape-c {
  height: var(--height-104);
  background-color: var(--color-gray);
}


.image-panel-b {
  height: 12.938rem;
}


.abstract-shape-d,
.abstract-shape-e {
  position: relative;
  left: 0;
  width: var(--width-104);
  height: var(--height-104);
}


.abstract-shape-d {
  top: 6.438rem;
  background-color: var(--color-royalblue-200);
}


.abstract-shape-e {
  top: 0;
  background-color: var(--color-darksalmon);
  z-index: 1;
}


.image-panel-c {
  position: relative;
  top: 22.063rem;
  left: 6.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.abstract-shape-f,
.abstract-shape-g,
.abstract-shape-h {
  width: var(--width-104);
  height: var(--height-104);
  position: relative;
  background-color: var(--color-royalblue-200);
}


.abstract-shape-g,
.abstract-shape-h {
  background-color: var(--color-snow-100);
}


.abstract-shape-h {
  position: relative;
  top: 28.563rem;
  left: 0;
}


.abstract-shape-i {
  left: 0;
  background-color: var(--color-gold);
  z-index: 1;
}


.abstract-shape-i,
.abstract-shape-j,
.abstract-shape-k {
  position: relative;
  top: 28.563rem;
  width: var(--width-104);
  height: var(--height-104);
}


.abstract-shape-j {
  left: 0;
  background-color: var(--color-gold);
  z-index: 2;
}


.abstract-shape-k {
  left: 6.5rem;
  background-color: var(--color-darksalmon);
  z-index: 3;
}


.art-feature {
  position: relative;
  top: 15.625rem;
  left: 13rem;
  display: flex;
  align-items: flex-start;
  z-index: 4;
}


.art-element-a-parent {
  flex-direction: column;
}


.art-element-a,
.art-element-a-parent {
  display: flex;
  align-items: flex-start;
}


.abstract-shape-l,
.art-fragment-shape-a,
.art-fragment-shape-d {
  height: var(--height-104);
  width: var(--width-104);
  position: relative;
  background-color: var(--color-darksalmon);
}


.abstract-shape-l,
.art-fragment-shape-d {
  background-color: var(--color-gold);
}


.abstract-shape-l {
  position: absolute;
  top: 7.106rem;
  left: 9.546rem;
  background-color: var(--color-royalblue-100);
  transform: rotate(23.2deg);
  transform-origin: 0 0;
  z-index: 5;
}


.they-need-better {
  color: var(--color-royalblue-100);
  line-height: 97%;
}


.why-description{font-size: var(--step-1); line-height: 150%;}

.sometimes-that-means {
  line-height: 140%;
}



.services {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}



.service {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--color-light-pink);
  padding:4rem;
  position: relative;
  font-size: var(--step--1); line-height: 140%; letter-spacing: -0.3px;
}

.service h3 {margin-bottom: 1rem}
.service p, .service ul {opacity: .8}

.service:nth-child(2){

margin-top: 4rem ;

}


.service:nth-child(3){

margin-top: 8rem ;

}



.service > .squares{
  position: absolute;
  top:0;
  right:0px;
  height:100%;
}


.squares > div{
 width: 50px;
 aspect-ratio: 1 / 1;

}

.square-blue{background-color: var(--color-royalblue-200)}
.square-pink{background-color: var(--color-darksalmon)}
.square-yellow{background-color: var(--color-gold);}
.square-brown{background-color: var(--color-dimgray);}


.service:nth-child(1) > .squares{

background-color: var(--color-dimgray);

}


.service:nth-child(2) > .squares{

background-color: var(--color-gold);

}


.service:nth-child(3) > .squares{

background-color: var(--color-darksalmon)

}


.hiring-recruiting-leadership {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  padding-left: var(--padding-21);
  line-height: 140%;
}


.hiring-recruiting {
  margin-bottom: Mixed;
  line-height: 140%;
}


.container5,
.features {
  display: flex;
  flex-direction: column;
  align-items: center;
}


.features {
  align-self: stretch;
  background-color: var(--color-white);
  overflow: hidden;
 
  
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-60);
  color: var(--color-gray);
  font-family: var(--font-main);
}


.container5 {
  width: 100%;

}


.section-title,
.title {
  display: flex;
  align-items: flex-start;
}


.section-title {
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0;
  max-width: 100%;
  row-gap: var(--gap-20);
}


.title > h2 {
font-size: var(--step-3);
max-width: 20ch;
padding-top: 2rem;
padding-left: 2rem;
}


.medium-length-hero-container4 {
  margin: 0 !important;
  width: 27.438rem;
  height: 7.688rem;
  position: absolute;
  top: 2.25rem;
  left: 0;
  font-size: inherit;
  line-height: 101%;
  display: inline-block;
  z-index: 0;
  flex-shrink: 0;
  font-family: inherit;
}


.bite-size2 {
  font-family: var(--font-pixelify-sans);
  line-height: 101%;
}



.span {
  letter-spacing: -0.04em;
  line-height: 101%;
}


.span {
  letter-spacing: -0.14em;
}


.features2 {
  
  display: grid;
  
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-content: start;
  max-width: 100%;
  row-gap: 0;
  font-size: var(--fs-26);
  color: var(--color-snow-100);
  font-family: var(--font-geist);
}


.feature-card-display {

  
  display: flex;
  align-items: flex-start;
  padding: var(--padding-36);
  
  height:100%;
  aspect-ratio: 1 / 1;
  font-size: var(--step-2);
}


.medium-length-hero4 {
  flex: 1;
  position: relative;
  letter-spacing: -0.02em;
  line-height: 120%;
  font-weight: 500;
}
.card1{background-color: var(--color-royalblue-100);
grid-column: 2;
  grid-row: 1;}

.card1, .card4{color:var(--color-white)}

.card2, .card3, .card4 {

  align-items: flex-start;
  padding: var(--padding-36);
}


.card2 {
  background-color: var(--color-darksalmon);
  display: flex;
  
  grid-column: 3;
  grid-row: 1;
  color: var(--color-gray);
}


.card3,
.card4 {
  grid-row: 2;
}


.card3 {
  background-color: var(--color-gold);
  display: flex;
  
  grid-column: 1;
  color: var(--color-gray);
}


.card4 {
  background-color: var(--color-royalblue-100);
  grid-column: 3;
}



.card4,
.card5 {
  display: flex;
  
}


.card5 {
color: white;
  background-color: var(--color-gray);
  align-items: flex-start;
  padding: var(--padding-36);
  grid-column: 2;
  grid-row: 2;
}


.about {
  align-self: stretch;
  background-color: var(--color-white);
  overflow: hidden;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 100%;
  text-align: left;
  
  color: var(--color-gray);
   gap:4rem;
}

.about-description{max-width: 50ch;}
.portrait {

  position: relative;
  max-width: 100%;
  width: 100%;
}


.portrait > img{ width:100%; position: relative;}

.portrait > svg {position: absolute; top: 0; left:0;width: 100%}



.portrait-child {
  top: 0;
  left: 0;
  background-color: var(--color-darksalmon);
  display: none;
}


.portrait-child,
.portrait-child2,
.portrait-inner,
.portrait-item {
  position: absolute;
  width: var(--width-104);
  height: var(--height-104);
  z-index: 1;
}


.portrait-item {
  top: 28.563rem;
  left: 24.5rem;
  background-color: var(--color-royalblue-100);
}


.portrait-child2,
.portrait-inner {
  left: 31rem;
}


.portrait-inner {
  top: 0;
  background-color: var(--color-white);
}


.portrait-child2 {
  top: 28.563rem;
  background-color: var(--color-darksalmon);
}


.portrait-child4 {
  top: 22.125rem;
  left: 24.5rem;
  background-color: var(--color-gold);
  display: none;
  z-index: 2;
}


.portrait-child4,
.portrait-child5,
.portrait-child6,
.portrait-child7 {
  position: absolute;
  width: var(--width-104);
  height: var(--height-104);
}


.portrait-child5 {
  top: 22.125rem;
  left: 24.5rem;
  background-color: var(--color-gold);
  z-index: 3;
}


.portrait-child6,
.portrait-child7 {
  background-color: var(--color-white);
  z-index: 1;
}


.portrait-child6 {
  top: 22.063rem;
  left: 0;
}


.portrait-child7 {
  top: 28.563rem;
  left: 6.5rem;
}


.portrait-child11,
.portrait-child8,
.portrait-child9 {
  position: absolute;
  left: 0;
  background-color: var(--color-darksalmon);
  width: var(--width-104);
  height: var(--height-104);
}


.portrait-child8 {
  top: 28.563rem;
  display: none;
  z-index: 1;
}


.portrait-child11,
.portrait-child9 {
  top: 0;
}


.portrait-child9 {
  display: none;
  z-index: 2;
}


.portrait-child11 {
  z-index: 3;
}


.text {
 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap-16);
  max-width: 100%;
}


.medium-length-hero9 {
  margin: 0;
  
  position: relative;
  font-size: inherit;
  letter-spacing: -0.03em;
  line-height: 97%;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
}


.lorem-ipsum-dolor {
  
  position: relative;
  font-size: var(--fs-20);
  line-height: 130%;
  font-weight: 500;
  font-family: var(--font-geist);
  display: inline-block;
}


.contact {
  align-self: stretch;
  background-color: var(--color-royalblue-100);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--padding-80) var(--padding-64) 11.25rem;
  text-align: center;
  font-size: var(--fs-48);
  color: var(--color-snow-100);
  font-family: var(--font-main);
  color: var(--color-white);
}


.contact-info-area,
.contact-info-area-parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}


.contact-info-area-parent {
  width: 36.375rem;
  gap: 2.625rem;
}


.contact-info-area {
  gap: var(--gap-16);
  flex-shrink: 0;
}


.medium-length-hero10 {
  margin: 0;
  width: 52.125rem;
  position: relative;
  font-size: inherit;
  letter-spacing: -0.03em;
  line-height: 97%;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
}


/* --- Desktop Dropdown Placement Mechanics --- */


@media (min-width: 769px) {

  /* Target opened dropdown panel */
  
  /* Hide mobile-specific layout constraints */
  .menu-toggle-btn { display: none; }
  .nav-container { display: block; position:relative; }
}


/* --- Responsive Mobile Drawer Rules --- */


@media (max-width: 768px) {


.wrapper{

 
  padding-inline: 2rem;
}




.grid-2-columns, .grid-3-columns {

 grid-template-columns: 1fr;
  
}


.service {
  
  padding:3rem;

}

.squares > div {
    width: 30px;
    
}

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


.about{flex-direction: row;}

.card2, .card3, .card4{grid-column: auto; grid-row: auto}

  .menu-toggle-btn {
    display: block;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
  }

  /* Format hamburger icon lines */
  .hamburger-icon, .hamburger-icon::before, .hamburger-icon::after {
    display: block;
    width: 24px;
    height: 2px;
    background: #333;
    position: relative;
    transition: 0.2s;
  }
  .hamburger-icon::before { content: ""; top: -6px; left: 0; }
  .hamburger-icon::after { content: ""; top: 4px; left: 0; }

  /* Mobile tray transformed into a full viewport side drawer */
  .nav-container:popover-open {
    display: block;
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    width: 280px;
    background: var(--color-light-pink);
  
    padding: 2rem;
    width:100%;
    
  }

  .nav-links {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  /* Inline mobile adjustments for dropdown lists */
}




@media screen and (max-width: 1125px) {

.hero > div{
  flex-direction: column-reverse;
  align-items: flex-start;
  gap:2rem;
}

.hero {
    height: auto;
    max-height: none;
  }
  .tagline {
    width: 100%;
  }
  
  .services {
    height: auto;
  }

  .container5 {
    max-width: 100%;
  }
  .about {
    gap: var(--gap-40);
    flex-wrap: wrap;
  
    
  }
  .portrait,
  .text {
    flex: 1;
  }


.grid-2-columns, .grid-3-columns {

 grid-template-columns: 1fr;
  
}


  .tagline {
    min-width: 100%;
  }

  .about,
  .contact {
    
  }
  .contact {
    padding-top: 3.25rem;
  }
}