/*Global Styles*/

/* global reset */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* set brand variables */
:root {

/* ─── Table of Contents ─── */
/*
Section 1 - Color
Section 2 - Tight

*/

/* -- Section 1 - Color -- */
/* Primary Brand color */
  --color-green-50: #f5faf9;
  --color-green-100: #e7f3f0;
  --color-green-200: #cde5df;
  --color-green-300: #8beed6;
  --color-green-400: #4ce6bd;
  --color-green-500: #1BB98E;
  --color-green-600: #18aa83;
  --color-green-700: #127d60;
  --color-green-800: #115543;
  --color-green-900: #0b372b;
  --color-green-950: #07221b;

/* Accent color */
  --color-orange-50: #faf6f5;
  --color-orange-100: #f3ebe7;
  --color-orange-200: #e6d4cc;
  --color-orange-300: #f8a381;
  --color-orange-400: #f56e3d;
  --color-orange-500: #ed480c;
  --color-orange-600: #b8380a;
  --color-orange-700: #882907;
  --color-orange-800: #5a210c;
  --color-orange-900: #3b1508;
  --color-orange-950: #240d05;

/* Nuetrals */
  --color-gray-50: #f8f7f7;
  --color-gray-100: #eeedec;
  --color-gray-200: #dddcda;
  --color-gray-300: #c2c0bd;
  --color-gray-400: #a19f9b;
  --color-gray-500: #83817c;
  --color-gray-600: #696763;
  --color-gray-700: #4e4d4b;
  --color-gray-800: #373634;
  --color-gray-900: #222120;
  --color-gray-950: #151414;

/* Secondary Colors */
  --color-teal-50: #f6f9f8;
  --color-teal-100: #e9f1f0;
  --color-teal-200: #cde4e2;
  --color-teal-300: #97d8d2;
  --color-teal-400: #55cec4;
  --color-teal-500: #299990;
  --color-teal-600: #1f6f69;
  --color-teal-700: #184e49;
  --color-teal-800: #12302e;
  --color-teal-900: #0d1c1b;
  --color-teal-950: #080d0c;

/* Utiltiy Colors */
  --background-light:     #f2efe9; /* warm neutral for page backgrounds */
  --type-color-dark:          #111111; /* off-black for type */
  --type-color-light:         var(--color-gray-500); /* secondary gray for type */
  --type-color-med:          var(--color-gray-800);


/* -- Section 2 - Type -- */
/* -- Typography -- */
  --type-base: 'DM Sans', sans-serif;
  --type-display: 'Big Shoulders Display',sans-serif;
  --type-accent: 'Cousine', serif;

/* -- Type scale - ratio 1.333 -- */
  --text-xs:   clamp(0.75rem,  0.7rem + 0.25vw,  0.8rem);
  --text-sm:   clamp(0.875rem, 0.83rem + 0.23vw, 0.95rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-md:   clamp(1.2rem,   1.1rem + 0.5vw,   1.333rem);
  --text-lg:   clamp(1.333rem, 1.2rem + 0.75vw,  1.777rem);
  --text-xl:   clamp(1.5rem,   1.3rem + 1.25vw,  2.369rem);
  --text-2xl:  clamp(1.75rem,  1.4rem + 2vw,     3.157rem);
  --text-3xl:  clamp(2rem,     1.6rem + 3vw,     4.209rem);

  /* -- Line height -- */
  --leading-sx:  1.1;
  --leading-sm:   1.3;
  --leading-base: 1.5;
  --leading-lg:  1.7;

  /* -- Letter spacing -- */
  --tracking-sm:  -0.03em;
  --tracking-base:  0;
  --tracking-lg:    0.06em;
  --tracking-xl:   0.1em;

/* -- Section 3 - Spacing -- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */


/* Elements Settings*/
  --border-light: rgba(0,0,0,0.08);
  --border-accent: var(--color-green-500);
}

ul {
  list-style: none;
  padding: 0 0 0 1.25em;
}

li {
  position: relative;
  margin-bottom: 8px;
}

li::before {
  content: '–';           /* en dash feels more refined than a bullet */
  position: absolute;
  left: -1.25em;
}

.indent {
  padding-left: 1.25em;
}

.center {
  text-align: center;
}

footer.footer-container {
  margin-top: var(--space-12);
  padding: 48px 48px 100px 48px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:16px;
  text-align:center;
}

.footer-text {
  font-family: var(--type-accent);
  font-size: var(--text-xs);
  font-weight: 300;
  text-transform:uppercase;
  color: var(--type-color-light);
  line-height: var(--leading-lg);
}

.footer-logo svg {
  height:16px;
  width:auto;
  fill: #111;
}

/* Base Styles */
body {
  background: var(--background-light);
  color: var(--type-dark);
  font-family: var(--type-base);
}

.title-lg {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: var(--text-3xl);
  font-size: 68px;
  line-height: var(--leading-sx);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
}

.title-md {
  color: var(--color-gray-950);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--leading-sx);
}

h3.title-md {
  margin-top: var(--space-12);
  margin-bottom: var(--space-2);
}

.copy-lg {
  font-size: var(--text-base);
  font-family: var(--type-base);
  font-weight: 300;
  line-height: var(--leading-lg);
  color: var(--type-color-med);
}

p.copy-lg {
  margin-bottom: 1rem;
}

.container-lg {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}


.container-md {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.container-sm {
  max-width: 600px;
}

.block-huge-logo {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #CDE4E2;
}

.full-width-logo {
  padding: 2rem;
  width: 100%;
  max-width: 600px;
}

.full-width-logo p {
  color: #0B372B;
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--leading-sx);
}

.full-width-logo svg {
  width: 100%;
  height: auto;
  display: block;
  fill: #18AA83;
}

.block-copy {
  padding-top: var(--space-4);
  max-width:700px;
  margin: 0 auto;
  width: 100%;
  margin-bottom: var(--space-20);
  padding: 2rem;
}

.block-copy:nth-child(2) {
  border: 0px solid white;
  margin-top: var(--space-16)
}

.project-article {
  margin-top: 40px;
  border-top: 1px solid #c2c0bd;
  padding-top: 20px;
}

/* page specifics */

main.alpha-landing {
  margin: 0 auto;
  width: 100%;
}

.block-newsletter {
  text-align: center;
  font-family: var(--type-accent);
  font-size: var(--text-md);
  color: var(--color-orange-600);
  margin-bottom: 3rem;
}


a {
  text-decoration: none;
  color: var(--color-orange-600)
}

a:hover {
  color: var(--color-orange-500)
}

a.btn.btn-simple {
  font-size: var(--text-md);
}

.contact-form {
  margin-top: var(--space-6);
}

.contact-field {
  margin-bottom: var(--space-4);
}

.contact-field label {
  display: block;
  font-family: var(--type-base);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--type-color-med);
  margin-bottom: var(--space-2);
}

.contact-form input[type="text"],
.contact-form textarea {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-4);
  font-family: var(--type-base);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-base);
  color: var(--type-color-dark);
  background: #fff;
  border: 1px solid var(--type-color-dark);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.contact-form textarea {
  resize: vertical;
  min-height: 8rem;
}

.contact-form input[type="text"]:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--color-orange-600);
  outline-offset: -2px;
}

.contact-actions {
  margin-top: var(--space-6);
}

.contact-form button {
  font-family: var(--type-base);
  font-size: var(--text-base);
  font-weight: 500;
  color: #fff;
  background: var(--type-color-dark);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--type-color-dark);
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.contact-form button:hover {
  background: var(--color-orange-600);
  border-color: var(--color-orange-600);
}

.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.team-members-wrapper {
  margin-top: var(--space-8);
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.team-member {
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: var(--space-3);
}

.team-page .team-member{
  flex-direction: row;
  gap: var(--space-6)
}

.team-name {
  font-family: var(--type-base);
  font-size: var(--text-sm);
  font-weight: 700;
}

.team-title {
  font-family: var(--type-base);
  font-size: var(--text-sm);
  font-weight: 500;
}

.team-img {
  overflow: hidden; /* fallback / safety */
}

.team-img {
  flex-shrink: 0;
  height: 200px;
  overflow: hidden;
}

.team-img img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
}
/* Frame is opt-in */
.team-img.D-framing img {
  aspect-ratio: 173 / 268;
  clip-path: url(#d-frame-wide);
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-8);
  max-width: 1200px;
  margin: 0 auto;
}

.nav-logo-container a {
  display: block;
}

.nav-logo-container img {
  height: 28px;
  width: auto;
  display: block;
}

.nav-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-6);
}

.nav-menu a {
  font-family: var(--type-base);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-lg);
  color: var(--type-color-med);
}

.nav-menu a:hover,
.nav-menu a.is-active {
  color: var(--color-orange-600);
}

.site-page-main {
  padding-top: var(--space-12);
  padding-bottom: var(--space-8);
}

.site-page-main .block-copy {
  margin-bottom: var(--space-12);
}

@media (max-width: 640px) {
  .top-nav {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-4);
  }

  .nav-menu {
    justify-content: flex-start;
  }
}