@charset "UTF-8";

:root {
	/* Brand colors */
	--color-yellow: #ffdd15;
	--color-blue: #0057B8;
	--color-blue-alt: #0072B2;
	--color-red: #CE2029;
	--color-green: #008000;

	/* Neutrals */
	--color-black: #000000;
	--color-off-black: #111111;
	--color-white: #ffffff;
	--color-off-white: #fdfdfd;
	--color-gray-dark: #666666;
	--color-gray-mid: #999999;
	--color-gray-light: #cccccc;
	--color-gray-lighter: #e8e8e8;
	--color-gray-lightest: #eeeeee;
	--color-text-body: #212529;

	/* Toggle link tones */
	--color-link: #0056b3;
	--color-link-hover: #003d82;

	/* Section backgrounds */
	--color-solution-bg: #E6F9F1;

	/* Gradient stops */
	--grad-yellow-1: #ecc901;
	--grad-yellow-2: #d8bf40;
	--grad-index-1: #e97727;
	--grad-index-2: #e73c61;
	--grad-index-4: #23d5ab;

	/* Transitions */
	--transition-fast: 0.15s ease-out;
	--transition-base: 0.2s ease-out;
	--transition-slow: 0.3s ease-out;

	/* Radii */
	--radius-sm: 4px;
	--radius-md: 8px;

	/* Fluid type scale (320px → 1200px viewport) */
	--fs-h1: clamp(2.8rem, 2rem + 4vw, 5rem);
	--fs-h2: clamp(2rem, 1.82rem + 0.91vw, 2.5rem);
	--fs-h3: clamp(1.5rem, 1.41rem + 0.45vw, 1.75rem);
	--fs-h4: clamp(1.2rem, 1.18rem + 0.09vw, 1.25rem);
	--fs-hero-h1: clamp(3em, 2.27rem + 3.64vw, 5em);
	--fs-highlight: clamp(2em, 1.5rem + 1.82vw, 3em);
    --fs-banner-h1: clamp(3.5em, 2.59rem + 4.55vw, 6em);

	/* Shadows / overlays */
	--overlay-heavy: rgba(0, 0, 0, 0.5);
	--shadow-dropdown: 0px 8px 16px rgba(0, 0, 0, 0.2);
	--shadow-hover: 0 4px 15px rgba(0, 0, 0, 0.1);
}
html { height: 100%; scroll-behavior: smooth; overscroll-behavior: none; }
*,*:before,*:after { box-sizing: border-box; }
body {
	font-family: "Inter", sans-serif;
	font-style: normal;
	font-weight: normal;
	font-optical-sizing: auto;
	background-color:var(--color-off-white);
	color:var(--color-off-black);
	margin:0;
}

/* COLORS */
.yellow { color:var(--color-yellow); }
.black { color:var(--color-black); }
.white { color:var(--color-white); }
.blue { color:var(--color-blue); }
.gray { color:var(--color-gray-mid); }
.lightgray { color:var(--color-gray-light); }
.red { color:var(--color-red); }
.green { color:var(--color-green); }
.black-bg { background-color:var(--color-black); }
.white-bg { background-color:var(--color-white); }
.blue-bg { background-color:var(--color-blue-alt); }
.no-bg {background-color: transparent;}


/* TEXT STYLES */
h1, h2, h3, h4, h5, p { margin: 0 0 16px 0; }
h1 { font-weight: 200; font-size: var(--fs-h1); }
h2 { font-weight: 200; font-size: var(--fs-h2); }
h3 { font-weight: 500; line-height: 1.6em; font-size: var(--fs-h3); }
h4 { font-weight: 500; line-height: 1.6em; font-size: var(--fs-h4); }
p, li { color:var(--color-text-body); font-size:1em; line-height: 1.8em; }
ol li {margin-left: -20px; font-weight:700; line-height: 1.8em; }
ul li { margin-left: -20px; line-height: 1.8em; }
a { 
	transition: all var(--transition-base) 0s;
    color:var(--color-blue);
}
a:hover { color:var(--color-yellow); }
small { display: inline-block; padding-top: 1em;}

.max-char { max-width:80ch; }
.indent { margin-left: 30px; }
.quotes { text-indent: -8px; font-weight:300 }


/* BUTTONS */	
.btn, .spec-btn {
    padding: 12px 16px;
    color: var(--color-black);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-sm);
    font-weight:300;
    text-align: center;
    font-size: 1em;
    transition: var(--transition-fast) 0s;
    cursor: pointer;
    white-space: nowrap; /* Prevents text inside from wrapping to a new line */
    word-break: normal;  /* Keeps words whole */
    flex-shrink: 0;
}
.btn {
    display:flex;
    gap:8px;
}
.btn:hover { transform: scale(1.1); color: var(--color-black); }	
.spec-btn:hover { color: var(--color-black); }		
.btn-yellow { background-image: linear-gradient(180deg, var(--grad-yellow-1) 20%, var(--grad-yellow-2) 80%);  box-shadow: inset 0 0 2px var(--overlay-heavy);}
.btn-clear { border: none; background-color:var(--color-white); }	
.btn-clear:hover { background-color:var(--color-gray-lightest); }	
.button-row { display:flex; gap:8px; align-items: center; }
.btn-fix { height:50px; padding-top: 16px; }


/* LAYOUT */
.container {
	margin-right: auto;
  	margin-left: auto;
    width: 1128px;
    overflow:visible;
}
section { padding: 2rem 0;}


/* BORDERS */
.border { border: solid 1px var(--color-black); }
.border-green { border: solid 1px var(--color-green); }
.border-red { border: solid 1px var(--color-red); }


/* IMAGES */
.img-responsive { width: 100%; height: auto; }
.img-row {
    display:flex;
    align-items:start;
    align-content: flex-start;
    gap: 1em;
}
.hero-image {
    height:30em;
    background-color: #ececec;
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0px 0px 10px var(--overlay-heavy);
}
@media all and (max-width:767px) {
	.hero-image { height:20em; }
}
.hero-rydergyde { background-image: url("../rydergyde/images/rydergydehero.webp"); }
.hero-mayfair { background-image: url("../mayfair/images/mayfairhero.webp"); }
.hero-prophet { background-image: url("../prophet/images/prophethero.webp"); }
.hero-risk { background-image: url("../risk/images/riskhero.webp"); }


/* FLEXBOX */
.flexbox { display:flex; gap:2em; }
.icon-align { display:flex; align-items:center; gap: 8px; }
.nav-flexspread, .foot-flexspread {
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.flex-hero {
    display: flex;
    align-items: center;
}
.flexspread-centered {
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.flexside-centered {
    display:flex;
    align-items: center;
    gap: 2em;
}
.flexside-top {
    display:flex;
    align-items:flex-start;
    gap: 2em;
}
.flex1 { flex:1; min-width: 0; }
.flex2 { flex:2; min-width: 0; }
.flex3 { flex:3; min-width: 0; }
.flex4 { flex:4; min-width: 0; }


/* GENERAL COMPONENTS */

/* NAV */
nav { 
    height: 70px;
    padding: 16px;
    font-weight:300;
    position: sticky;
    top: 0;
    z-index:3;
}
nav	div a { color:var(--color-white); text-decoration: none; }
.dropdown {
  position: relative; display: inline-block; }
.dropdown-content {
  position: absolute;
  top: calc(100% + 16px);
  background-color: var(--color-off-black);
  width: max-content;
  box-shadow: var(--shadow-dropdown);
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px); 
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0.15s;
}
.dropdown-left { left: -24px; }
.dropdown-right {right: -16px;}
.dropdown-content a {
  padding: 16px 24px;
  display: block;
  text-decoration: none;
  color: var(--color-white);
  border-bottom: solid 1px var(--color-gray-dark);
  transition: all var(--transition-base) 0s;
}
.dropdown-content a:last-child { border-bottom: none;}
.dropdown-content a:hover { color:var(--color-yellow); }
.dropdown-content.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.dropbtn { cursor: pointer;}


/* HEADER */
header, .footlinks { padding:16px; }

/* SHOW - HIDE CONTENT */
/* Hide the "Hide Content" text by default */
.text-hide {
  display: none;
}

/* When the details element is open, hide the "Show" text */
details[open] .text-show {
  display: none;
}

/* When the details element is open, show the "Hide" text */
details[open] .text-hide {
  display: inline;
}

/* --- Basic Button Styles (same as before) --- */
.toggle-btn {
  color: var(--color-link);
  text-decoration: underline;
  cursor: pointer;
  user-select: none;
  list-style: none; /* Removes the default arrow */
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  transition: color 0.2s ease;
}

/* --- Basic Layout --- */
.toggle-section {
  display: block; 
}
.toggle-input {
  display: none; 
}

/* --- Link Button Styles --- */
.toggle-link {
  color: var(--color-link);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
  display: block;          /* Makes the link act like a block... */
  width: max-content;      /* ...but only as wide as the text inside it */
  margin: 0 auto;
}
.toggle-link:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}

/* --- Text Swapping Logic --- */
.toggle-input:checked ~ .toggle-link .text-show {
  display: none;
}
.toggle-input:checked ~ .toggle-link .text-hide {
  display: inline;
}

/* --- The Smooth Open/Close Animation (CSS Grid) --- */
.toggle-grid {
  display: grid;
  /* Start collapsed */
  grid-template-rows: 0fr; 
  transition: grid-template-rows var(--transition-slow);
}

.toggle-input:checked ~ .toggle-grid {
  /* Expand to natural height */
  grid-template-rows: 1fr; 
}

.toggle-content {
  /* Crucial: prevents content from spilling out while collapsed */
  overflow: hidden; 
}

/* --- Content Styling --- */
/* We apply margins and padding here so they don't break the 0fr collapse */
.content-inner {
  margin-top: 24px;
}

/* INDEX COMPONENTS

/* INDEX HERO */
.index-buttons { display:flex; justify-content: end; }
.index-hero {
	height:30em;
	display:flex;
    flex-direction: column;
	align-items: center;
    justify-content: center;
    overflow: hidden;
}
.index-gradient {
    background: linear-gradient(-45deg, var(--grad-index-1), var(--grad-index-2), var(--color-blue), var(--grad-index-4));
    background-size: 400% 400%;
    animation: gradient 45s ease infinite;  
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.cta { 
    padding:16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap:1em;
}

.index-hero div:first-child { gap:16px; }

.role-switcher {
  /* Hide the fallback HTML text visually */
  font-size: 0;
  display: inline-block;
  position: relative;
}

.role-switcher::after {
  /* Restore the font size for the animated text */
  font-size: var(--fs-h1);
  content: "Designer";
  display: inline-block;
  opacity: 0;
  animation: cycleRoles 13s ease-in-out infinite;
}

@keyframes cycleRoles {
  /* 1) Designer */
  0% {
    content: "Designer";
    opacity: 0;
  }
  3%, 30% {
    content: "Designer";
    opacity: 1;
  }
  33% {
    opacity: 0;
  }

  /* 2) Team Lead */
  36% {
    content: "Team Lead";
    opacity: 0;
  }
  39%, 63% {
    content: "Team Lead";
    opacity: 1;
  }
  66% {
    opacity: 0;
  }

  /* 3) Manager */
  69% {
    content: "Manager";
    opacity: 0;
  }
  72%, 96% {
    content: "Manager";
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
}

/* CASE STUDY CARDS */
.case-study-row { display:flex; gap:16px; }
.case-card {
    position: relative;
    background-color: var(--color-white);
	border: 1px solid var(--color-gray-light);
    padding:24px;
    border-radius: var(--radius-md);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display:block;
	flex: 1;
}
.case-card:hover {
	transform: translateY(-5px);
  	box-shadow: var(--shadow-hover);
}
.main-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.target:after {
	content: '\002B';
  	color: var(--color-off-black);
  	font-size: 2em;
	font-weight: 100;
  	float: right;
  	margin-left: 5px;
}
.active:after {
  content: "\2212";
}

/* ACCORDION */
.accordion {
	display: flex;
  	flex-direction: column;
}
.accordion .card {
	background-color: var(--color-white);
	padding:16px;
	border-bottom: 1px solid var(--color-gray-light);
	color:var(--color-black);
	box-sizing: border-box;
}
.card { cursor: pointer; }
.accordion .card:first-child {
	border-top: 1px solid var(--color-gray-light);
}
.accordion .card h3 { margin:0; }
.card h4 { padding: 20px 0 0 0; }
.card div:first-child {
    display:flex;
    justify-content: space-between;
    align-items: center;
}

/* SKILLS SECTION */
.skills {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    
}
.skills div { flex: 1 1 calc(33.333% - 16px); }

/* LOGO ROW */
.logo-marquee {
    overflow: hidden;
    width: 100%;

    /* Fade mask on left and right edges */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}
.logo-row {
	display:flex;
    flex-direction: row;
    width: max-content;
	align-items: center;
    gap:50px;
    animation: scrollLeft 30s linear infinite;
}
.logo-row div { flex:1; }
.logo-row img { width: max-content; height: auto; }

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Translates exactly half the total width (the length of 1 duplicate set) */
        transform: translateX(-50%);
    }
}
.brands {
	background-color: var(--color-white);
	/*box-shadow: 0 4px 8px var(--color-gray-light);*/
}

/* QUOTES */
.quoter {
	width: 100%;
	text-align: right;
}

/* PRODUCT PAGE COMPONENTS */

/* PRODUCT HERO */
.hero {
    display:flex;
    align-items: center;
    gap: 2em;
    height: 16em; 
}
.hero h1 { font-size: var(--fs-hero-h1); font-weight:500; }
.highlight {
    color:var(--color-blue);
    font-size: var(--fs-highlight);
    font-weight:200;
    /*text-indent: -18px;  USE FOR QUOTATIONS */
}

/* ROW OF CARDS */
.card-row { 
    display: flex;
    align-items:stretch;
}    
.card-row div {
	background-color: var(--color-white);
	border-radius: var(--radius-md);
	color: var(--color-blue);
	border: 4px solid var(--color-gray-lighter);
	padding: 1em;
	font-weight:500;
    flex: 1;
    min-width: 0; 
    display:flex;
    flex-direction:column;
    justify-content:space-around;
}

/* USER COMPONENT */
.user-profile {
    background-color: var(--color-gray-lighter);
    padding:24px;
    border-radius: var(--radius-md);
    box-shadow: 2px 2px 4px var(--color-black);
}
.user-title  {
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap:1em;
}


/* SHOW MORE IN USER COMPONENT */
.btn-show {
    width:100%;
    font-size: 1em;
    color:var(--color-blue);
    background-color: var(--color-gray-lightest);
    border-radius: var(--radius-md);
    border: solid 1px var(--color-gray-mid);
    text-align: center;
    padding: 8px 24px;
    cursor: pointer;
}

/* KPI BANNER */
.banner {
    background-color: var(--color-blue-alt);
    color: var(--color-white);
    padding:24px;
}
.banner h1 {
    font-size: var(--fs-banner-h1);
    font-weight: 900;
    margin:0;
}
.banner p {
    color: var(--color-white);
    margin:0;
}

/* PROBLEM BANNER */
.problem {
    background-color: var(--color-red);
    color: var(--color-white);
}

/* SOLUTION SECTION */
.solution { background-color: var(--color-solution-bg); }
.solution h2, .solution h3 { color:var(--color-green); }

/* BEFORE - AFTER */
.beforeafter {
    display:flex;
    align-items: center;
}

/* FINAL PROTOTYPE */
.final-proto {
    display:flex;
    align-items:flex-start;
    gap: 2em;
}


/* LESSONS LEARNED */
.lessons { max-width:80ch; }
.lessons h3 { 
    margin:0; 
    color:var(--color-blue); 
    padding-left: 28px;
    text-indent: -28px;  
}
.lessons p { margin-left: 32px; }


/* JOURNEY MAP */
.userjourney {
    position: relative;
    width:100%;
    height:310px;
}	
.sliderLeft, .map, .sliderRight {
	width: 100%;
  	height: 100%;
  	position: absolute;
}
.sliderRight, .sliderLeft {
	display: flex;
	justify-content:center;
	align-items: center;
	color:var(--color-white);
	background:var(--overlay-heavy);
	text-align: center;
	vertical-align: middle;
	width:50px;
	height:300px;
  	z-index: 2;
	font-size: 2.5em;
	font-weight:100;
	cursor: pointer;
}		
.sliderLeft { left:0; display:none; }	
.sliderRight {right:0;}
	
.map { overflow: auto; }	
.map img { width:auto; height:300px;}

@media all and (min-width:1200px) { .sliderRight { display:none; }  }
@media all and (min-width:481px) and (max-width:1199px) { #sliderRight2 {display: none; } }

@media all and (max-width:767px) {
	.userjourney { height:210px;}
	.sliderLeft {height:200px;}
	.sliderRight {height:200px;}
	.map img { width:auto; height:200px; }
}	


/* DIRECT FIXES */
.hide {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
    cursor: pointer;
}
.killmargin { margin:0; }
.text-center { text-align: center;}
.text-right { text-align: right; }
.block { display:block; }
.padbottom { padding-bottom: 1rem;}
.padtop { padding-top: 1rem; }
.gap { display:flex; flex-direction: column; gap:2rem; }
.gap1 { height: 1rem;}
.gap2 { height: 2rem;}
.pain-points h3 {
    color:var(--color-blue);
    margin:0 0 4px 0;
    padding-left: 28px;
    text-indent: -28px;
}
.pain-points p { margin-left: 28px; }
.results {
    padding-top: 1rem;
}
.results h3 { margin:0; }


/* RESPONSIVE MODS */

/* MOBILE SCREENS LESS THAN 767 PIXELS */
@media only screen and (max-width: 767px) {
    .container { width: 100%; padding:16px; }
    section { padding: 1rem 0; }
    .nav-flexspread { padding:16px; }
    .flexside-centered, .flexside-top {
        flex-direction: column;
        width: 100%;
        height: auto;
        gap: 2rem;
    }
    .case-study-row {
        flex-direction: column;
        width: 100%;
        height:auto;
    }
    .card-row {
        flex-direction: column;
        width: 100%;
        height:auto;
        align-items: center;
    }
    .flexspread-centered {
        flex-direction: column;
        width: 100%;
        height:auto;
        gap: 2rem;
        align-items: flex-start;
    }
    .banner div {
        flex-direction: column;
        align-items:flex-start;
        justify-content: center;
        gap: 8px;
    }
    .logo-row {
        flex-wrap: wrap;
        padding: 0 16px;
        gap:1em;
    }
    .logo-row img { 
        width: 100px;
        flex: 1 1 calc(50% - 8px); }

    .skills {
        flex-direction: column;
        gap:24px;
        
    }
    .beforeafter {
        flex-direction: column;
    }
    .vertical-list { margin:0;}
    .user-profile { padding:16px; }
    .user-title { flex-direction: column; align-items: flex-start; }
    /*.user-profile .flexspread-centered, .flexside-top {gap: 1rem;}*/
    .useful-fact h1 { font-size: 4em; }
    .index-hero { height:16rem; }
    .hero { 
        flex-direction: column;
        width: 100%;
        height: auto;
        gap:1em;
     }
    .final-proto {
        flex-direction: column;
        align-items:flex-start;
        gap: 0;
        padding-bottom: 24px;
    }
    .btn-fix { padding:16px 0; }

}

@media all and (min-width:768px) and (max-width:991px) {
	.container { width: 740px; }
    .hero { 
        flex-direction: column;
        width: 100%;
        height: auto;
        gap:1em;
        max-width: 80ch;
     }
    .index-hero { height:20rem; }
    
}
@media all and (min-width:992px) and (max-width:1199px) {
	.container { width: 960px; }
}


@media all and (min-width:768px) {
    .desktop-hide { display:none; }
}
@media only screen and (max-width: 767px) {
    .mobile-hide { display:none; }
}    


/* SIDE NAVIGATION */	
#sideNav {
    position:fixed;
	background-color:var(--color-black);
    top:0;
    bottom:0;
    right: -100%;
	font-size: 1.75em;
	padding: 15px 20px;
	width: 100%;
    height: 100vh;
	transition: right 0.3s ease;
	z-index:4;
}	
#sideNav ul { padding: 0; margin: 0; list-style-type: none; }
#sideNav li { margin: 15px 0; line-height: 1.5em; }
#sideNav li:first-child { margin: 0;}	
#sideNav ul li a, #close {
    color:var(--color-white);
	font-weight: 400;
    text-decoration: none;
	transition: all var(--transition-base) 0s;
	cursor:pointer;
}	
#sideNav ul li a:hover { color:var(--color-yellow); }
.home-box { width: 30px; height:30px; }
.close-box {
    position: absolute;
    top:0;
    right:0;
    font-size: 48px;
    line-height:1.3em;
    padding:0 15px;
}
.disabled { 
    pointer-events: none;
    cursor: default;
    color: var(--color-gray-mid) !important;
    text-decoration: none;
}