/* Tsao Family Foundation - static rebuild of the original GoDaddy Website Builder site.
   Design reference: tsao-site/References of Godaddy Site/*.png */

/* ---------- fonts (self-hosted, same files GoDaddy served) ---------- */
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/TK3_WkUHHAIjg75cFRf3bXL8LICs1xZosUtiZTaR.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/TK3_WkUHHAIjg75cFRf3bXL8LICs1xZosUJiZTaR.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/TK3_WkUHHAIjg75cFRf3bXL8LICs1xZosUliZTaR.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/TK3_WkUHHAIjg75cFRf3bXL8LICs1xZosUhiZTaR.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/TK3_WkUHHAIjg75cFRf3bXL8LICs1xZosUZiZQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/6xKtdSZaM9iE8KbpRA_hJFQNcOM.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/6xKtdSZaM9iE8KbpRA_hJVQNcOM.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/6xKtdSZaM9iE8KbpRA_hK1QN.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkBgv58m-wjwxUD2GF9Zc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkBgv58i-wjwxUD2GF9Zc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkBgv58a-wjwxUD2GFw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- base ---------- */
:root {
  --dark: #2e2e2e;
  --dark-footer: #262626;
  --header-title: #c9cbcc;
  --nav-link: #dededf;
  --ink: #2b2d2e;
  --body-text: #5c6062;
  --page-title: #4d5052;
  --link: #35586e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--body-text);
  background: #fff;
  /* full-height column so a short page still pins the footer to the bottom */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* main content grows to fill leftover viewport height */
body > main { flex: 1 0 auto; }
.site-header, .site-footer { flex: 0 0 auto; }

img { max-width: 100%; display: block; }

/* ---------- header ---------- */
.site-header {
  background: var(--dark);
  position: relative;
  z-index: 100;
}
.site-header .bar {
  display: flex;
  align-items: center;
  min-height: 88px;
  padding: 0 40px;
  position: relative;
}
.site-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 40px;
  letter-spacing: .01em;
  color: var(--header-title);
  text-decoration: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.main-nav { display: flex; align-items: center; gap: 44px; }
.main-nav a, .main-nav .drop-toggle {
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nav-link);
  text-decoration: none;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}
.main-nav a:hover, .main-nav .drop-toggle:hover { color: #fff; }
.drop { position: relative; }
.drop .caret {
  width: 10px; height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
}
.drop-menu {
  position: absolute;
  top: 100%;
  left: -18px;
  background: #fff;
  min-width: 200px;
  padding: 10px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  display: none;
}
.drop:hover .drop-menu, .drop.open .drop-menu { display: block; }
.drop-menu a {
  display: block;
  padding: 11px 22px;
  color: #3d4042;
  letter-spacing: .16em;
}
.drop-menu a:hover { color: #000; background: #f4f5f5; }

/* hamburger (mobile) */
.burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px;
  margin-left: -10px;
}
.burger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--nav-link);
  margin: 5px 0;
}

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0 15% 0 0;
  background: #fff;
  z-index: 1000;
  transform: translateX(-105%);
  transition: transform .3s ease-in-out;
  padding: 24px 32px;
  overflow-y: auto;
  box-shadow: 2px 0 24px rgba(0,0,0,.2);
}
.drawer.open { transform: translateX(0); }
.drawer .close {
  background: none; border: 0; cursor: pointer;
  font-size: 30px; line-height: 1; color: #2b2d2e;
  position: absolute; top: 18px; right: 22px;
}
.drawer nav { margin-top: 64px; }
.drawer a, .drawer .sub-toggle {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #2b2d2e;
  text-decoration: none;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  padding: 16px 0;
}
.drawer a.active { font-weight: 700; }
.drawer .sub { padding-left: 20px; display: none; }
.drawer .sub.open { display: block; }
.drawer .sub a { font-size: 13.5px; padding: 12px 0; }
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 999;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.drawer-overlay.show { opacity: 1; pointer-events: auto; }

/* ---------- hero (home) ---------- */
.hero {
  background: url(/assets/hero.webp) center 55% / cover no-repeat;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}
.hero h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  font-size: clamp(38px, 4.9vw, 78px);
  line-height: 1.08;
  letter-spacing: .005em;
}

/* ---------- content ---------- */
.section { padding: 72px 40px; }
.wrap { max-width: 1420px; margin: 0 auto; }
.wrap-narrow { max-width: 920px; margin: 0 auto; }

.page-title {
  font-size: 27px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--page-title);
  text-align: center;
  margin-bottom: 56px;
}

h3.block-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 22px;
}

p + p { margin-top: 26px; }

a.textlink { color: var(--link); text-decoration: underline; }
a.textlink:hover { color: #1d496b; }

/* home: three columns */
.cols3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 72px;
  text-align: center;
}

/* founders */
.founders h3.block-title { text-align: left; }
.founders p { text-align: left; }

/* focus: alternating rows */
.focus-row {
  display: flex;
  align-items: center;
  gap: 64px;
  margin-bottom: 72px;
}
.focus-row:last-child { margin-bottom: 0; }
.focus-row .media { flex: 0 0 48%; }
.focus-row .copy { flex: 1; text-align: center; }
.focus-row.flip { flex-direction: row-reverse; }

/* funding */
.funding { text-align: left; }
.funding ul { margin: 26px 0 26px 44px; }
.funding li { margin-bottom: 6px; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--dark-footer);
  padding: 52px 40px;
}
.site-footer p {
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #a6a8aa;
}

/* ---------- responsive ---------- */
@media (max-width: 1120px) {
  .site-title { font-size: 32px; }
  .main-nav { display: none; }
  .burger { display: block; }
  .cols3 { grid-template-columns: 1fr; gap: 56px; max-width: 640px; margin: 0 auto; }
  .focus-row, .focus-row.flip { flex-direction: column; gap: 32px; margin-bottom: 64px; }
  .focus-row .media { flex: none; width: 100%; }
  .hero h1 { font-size: clamp(34px, 9vw, 64px); }
  .section { padding: 56px 24px; }
  .site-header .bar { padding: 0 16px; min-height: 76px; }
  .site-footer { padding: 44px 24px; text-align: center; }
}

@media (max-width: 640px) {
  .site-title {
    position: static;
    transform: none;
    flex: 1;
    text-align: center;
    font-size: 24px;
  }
  .site-header .bar { min-height: 64px; }
}
