/* Corporate minisite (#5837), built from Brett's Figma "Teos Corporate Minisite — Redesign (ValetMD)", frames
   Desktop 1440 and Mobile 390. Values here are the Figma tokens; where the two frames differ, desktop is canonical.
   Static HTML/CSS only: no script, no tracker. Shared by every page of the minisite. */

:root {
  color-scheme: light;

  /* Figma variables */
  --surface-white: #ffffff;
  --surface-cream: #f5f0e8;
  --border-default: #d8dee4;
  --text-primary: #222741;
  --text-secondary: #57606a;
  --text-on-dark: #ffffff;
  --brand-navy: #222741;
  --brand-teal: #47766e;
  --brand-teal-light: #5b8f87;
  --brand-gold-dim: rgba(166, 136, 64, 0.1);
  --valetmd-bg: #f5f5f5;
  --valetmd-navy: #102838;
  --valetmd-mint: #00b880;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;

  /* 1200px content column at 1440; 24px gutter at phone width */
  --gutter: clamp(24px, 8.333vw, 120px);
  --section-pad: 120px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface-white);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
p, h1, h2, h3, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }
a:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 3px; border-radius: 4px; }

/* ---- Type styles (Figma text styles) ---- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 1.56px;
  color: var(--brand-teal);
}
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}
.display-xl { font-size: 64px; line-height: 72px; }
.display-l { font-size: 44px; line-height: 52px; }
.display-m { font-size: 28px; line-height: 36px; }
.display-s { font-size: 20px; line-height: 28px; }
.body-l { font-size: 20px; line-height: 32px; color: var(--text-secondary); }
.body-m { font-size: 16px; line-height: 26px; color: var(--text-secondary); }
.label-m { font-weight: 600; font-size: 15px; line-height: 20px; }

/* ---- Sections ---- */
.band { padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.band-white { background: var(--surface-white); }
.band-cream { background: var(--surface-cream); }
.wrap { max-width: 1200px; margin-inline: auto; display: flex; flex-direction: column; gap: 48px; }
.section-heading { display: flex; flex-direction: column; gap: 16px; }
.section-heading .display { color: var(--text-primary); }

/* ---- Hero ---- */
.hero { padding-block: 96px var(--section-pad); }
.hero .wrap { gap: 32px; }
.intro-list { list-style: decimal; padding-left: 1.5em; }
.logo-teos { width: 110.8px; height: 34px; }
.hero-intro, .only-phone { display: none; }
.hero-card {
  display: flex;
  align-items: center;
  gap: 80px;
  padding: 72px;
  border-radius: 32px;
  background: var(--valetmd-bg);
  color: var(--valetmd-navy);
}
.hero-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero-copy .eyebrow { color: var(--valetmd-navy); }
.hero-copy .body-l, .hero-copy .body-m { color: var(--valetmd-navy); }
.cta-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.brand-panel {
  flex: 0 0 420px;
  height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px;
  border-radius: 24px;
  background: var(--surface-white);
}
.brand-panel .logo-valetmd { width: 300px; height: 51px; }

/* ---- Buttons (ValetMD Button/Primary, /Secondary) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  color: var(--valetmd-navy);
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary { background: var(--valetmd-mint); }
.btn-primary:hover { background: #00a874; }
.btn-secondary { border: 1.5px solid var(--valetmd-navy); padding: 15.5px 25.5px; }
.btn-secondary:hover { background: rgba(16, 40, 56, 0.06); }
.btn:focus-visible { outline-offset: 3px; border-radius: 999px; }

/* ---- Who we are ---- */
.who { padding-block: 0 var(--section-pad); }

/* ---- What we deliver ---- */
.deliver { padding-block: var(--section-pad); }
.care-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.care-card { display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: 12px; background: var(--surface-white); }
.icon-tile { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--brand-gold-dim); margin-bottom: 20px; }
.icon-tile img { width: 20px; height: 20px; }
.care-card .display { color: var(--text-primary); }

/* ---- Mission & vision ---- */
.mission .row { display: flex; gap: 24px; align-items: flex-start; }
.statement { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 48px; border-radius: 16px; }
.statement-light { background: var(--surface-white); border: 1px solid var(--border-default); color: var(--text-primary); }
.statement-dark { background: var(--brand-navy); color: var(--text-on-dark); }
.statement-dark .eyebrow { color: var(--brand-teal-light); }

/* ---- Values ---- */
.values { padding-block: var(--section-pad); }
.value-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; align-items: start; }
.value-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 16px; background: var(--surface-white); border: 1px solid var(--border-default); }
.value-card .label-m { color: var(--text-primary); }

/* ---- Portfolio ---- */
.portfolio { padding-block: var(--section-pad); }
.brand-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.brand-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px; border-radius: 16px; }
.brand-card-live { background: var(--valetmd-bg); color: var(--valetmd-navy); }
.brand-card-live .body-m { color: var(--valetmd-navy); }
.brand-card-live .logo-valetmd { width: 180px; height: 31px; }
.brand-card-next { background: var(--surface-cream); border: 1px solid var(--border-default); }
.brand-card-next .display { color: var(--text-secondary); }
.status { padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: 1.56px; }
.status-live { background: var(--valetmd-mint); color: var(--valetmd-navy); }
.status-next { background: var(--border-default); color: var(--text-secondary); }

/* ---- Leadership & contact ---- */
.leadership { padding-block: var(--section-pad); }
.leader-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.leader-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 16px; background: var(--surface-white); border: 1px solid var(--border-default); }
.leader-card .headshot { width: 96px; height: 96px; border-radius: 999px; object-fit: cover; }
.leader-card .label-m { color: var(--text-primary); }
.contact { display: flex; flex-direction: column; gap: 12px; padding: 48px; border-radius: 16px; background: var(--brand-navy); color: var(--text-on-dark); }
.contact .eyebrow { color: var(--brand-teal-light); }
.contact .body-m { color: var(--text-on-dark); white-space: pre-wrap; }

/* ---- Footer ---- */
.site-footer { background: var(--brand-navy); padding-block: 48px; }
.footer-row { max-width: 1200px; margin-inline: auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.footer-links { display: flex; gap: 24px; color: var(--text-on-dark); }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-legal { color: var(--brand-teal-light); }

/* ---- Between desktop and phone ---- */
@media (max-width: 1199px) {
  .value-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leader-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-row { flex-wrap: wrap; }
}
/* The hero's 64px heading and 420px panel need 1280 to sit side by side. */
@media (max-width: 1279px) {
  .hero-card { flex-direction: column; align-items: stretch; gap: 32px; padding: 48px; }
  .brand-panel { flex-basis: auto; height: auto; padding: 40px; }
}
@media (max-width: 1023px) {
  .care-grid, .brand-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mission .row { flex-direction: column; align-items: stretch; }
}

/* ---- Phone: the Mobile 390 frame ---- */
@media (max-width: 640px) {
  :root { --section-pad: 64px; }
  .display-xl { font-size: 44px; line-height: 52px; }
  .display-l { font-size: 28px; line-height: 36px; }
  .body-l { font-size: 16px; line-height: 26px; }
  .wrap { gap: 48px; }

  .hero { padding-block: 40px 56px; }
  .hero .wrap { gap: 24px; }
  .hero-intro, .only-phone { display: block; }
  .only-wide { display: none; }
  .hero-card { padding: 28px; border-radius: 20px; gap: 32px; }
  .cta-row { flex-direction: column; }
  .brand-panel { padding: 24px; }
  .brand-panel .logo-valetmd { width: 220px; height: 38px; }

  .who { padding-block: 64px; }
  .care-grid, .brand-row, .value-row, .leader-row { grid-template-columns: minmax(0, 1fr); }
  .care-grid, .brand-row { gap: 24px; }
  .value-row, .leader-row { gap: 16px; }
  .mission { padding-block: 64px; }
  .statement { padding: 32px; }
  .contact { padding: 32px; }

  .footer-row { flex-direction: column; }
  .footer-links { flex-direction: column; }
}

/* Below the 390 frame, "membership" and the primary button outgrow the card's column at their drawn sizes. */
@media (max-width: 389px) {
  .display-xl { font-size: calc(15vw - 16px); line-height: 1.18; }
  .btn { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}