/* Shared base for the careers redesign concepts.
   Values mirror https://splootvets-site.vercel.app/styles/sploot-tokens.css (fetched 2026-10-06).
   Note: live tokens now use ONE coral, #E25E5A, for accent + buttons (Cooper 2026-09-22). */

@import url('https://splootvets-site.vercel.app/styles/sploot-fonts.css');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --cream-40: #FAF7F4;
  --cream-60: #F2EAE4;
  --cream-80: #EBE0D7;
  --cream-100: #E5D9CD;
  --mint-40: #EBF8F3;
  --mint-60: #D6F0E7;
  --mint-100: #7FD1B9;
  --opal-40: #FAEAE7;
  --teal-140: #10302F;
  --teal-120: #164347;
  --teal-110: #234246;
  --teal-100: #1B4B4B;

  --color-bg: var(--cream-60);
  --color-surface: var(--cream-40);
  --color-surface-muted: var(--cream-80);
  --color-surface-soft: var(--mint-40);
  --color-surface-inverse: var(--teal-100);
  --color-text: var(--teal-120);
  --color-text-muted: rgb(22 67 71 / 0.65);
  --color-text-subtle: rgb(22 67 71 / 0.55);
  --color-text-inverse: var(--cream-40);
  --color-text-inverse-muted: rgb(250 247 244 / 0.7);
  --color-accent: #E25E5A;
  --color-accent-hover: #F3968E;
  --color-hairline: rgb(22 67 71 / 0.08);
  --color-border: rgb(22 67 71 / 0.10);
  --color-border-strong: rgb(22 67 71 / 0.15);

  --font-heading: 'New Spirit', Georgia, serif;
  --font-sans: 'Outfit', system-ui, sans-serif;

  --radius-card: 18px;
  --radius-page: 24px;
  --radius-feature: 28px;
  --radius-pill: 9999px;

  --shadow-sm: 0 4px 12px rgb(22 67 71 / 0.06);
  --shadow-lift: 0 20px 50px -20px rgb(22 67 71 / 0.25);
  --shadow-feature: 0 30px 60px -25px rgb(22 67 71 / 0.30);

  /* Gutter and section spacing mirror the live tokens (sploot-tokens.css): 64/48/32/24 and 96/80/64/48. */
  --gutter: 64px;
  --section-y-sm: 96px;
  --max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-synthesis: none; } /* never fake a bold or italic the brand fonts don't ship (New Spirit has no Bold Italic) */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 16px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
/* One shared finish for every photo, so warm wood interiors, white clinic rooms and outdoor shots sit together on the cream page.
   Photography direction isn't documented in the brand kit yet; adjust or set to "none" here. */
:root { --photo-grade: contrast(1.04) saturate(1.03) sepia(0.05); }
img.photo { filter: var(--photo-grade); }
/* Some library photos have a coral frame baked in: zoom just enough to crop it out (set --zoom per image). */
img.framed { transform: scale(var(--zoom, 1.1)); }
button, input, select, textarea { font-family: inherit; }
strong, b { font-weight: 700; }
h1 strong, h2 strong, h3 strong, h4 strong { font-weight: inherit; }
a { color: inherit; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 991px) { :root { --gutter: 48px; --section-y-sm: 80px; } }
@media (max-width: 767px) { :root { --gutter: 32px; --section-y-sm: 64px; } }
@media (max-width: 479px) { :root { --gutter: 24px; --section-y-sm: 48px; } }

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; line-height: 1.2; margin: 0; text-wrap: balance; }
.display { font-weight: 700; font-size: clamp(36px, 5.2vw, 60px); line-height: 1.1; }
.h2 { font-size: clamp(28px, 3.4vw, 40px); }
.h3 { font-size: clamp(20px, 2vw, 28px); }
em.accent, .accent { font-style: italic; color: var(--color-accent); }
p { margin: 0; }
.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--color-text-muted); }
.muted { color: var(--color-text-muted); }

/* Eyebrow: left-aligned gets one rule on the left; centered gets flanking rules. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 12px/1 var(--font-sans); letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--color-accent);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.eyebrow.center::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.on-dark .eyebrow { color: var(--color-text-inverse-muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 28px; border-radius: var(--radius-pill);
  font: 700 16px/1 var(--font-sans); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn-primary { background: var(--color-accent); color: var(--cream-60); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-dark { background: var(--teal-120); color: var(--cream-60); }
.btn-dark:hover { background: var(--teal-110); }
.btn-outline { background: rgb(226 94 90 / 0); color: var(--color-accent); border-color: var(--color-accent); }
.btn-outline:hover { background: var(--color-accent); color: var(--cream-60); }
.on-dark .btn-outline { color: var(--cream-40); border-color: rgb(250 247 244 / 0.4); }
.on-dark .btn-outline:hover { background: var(--cream-40); color: var(--teal-120); border-color: var(--cream-40); }

.card {
  background: var(--color-surface); border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-sm);
}
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-radius: var(--radius-pill); background: var(--mint-40); color: var(--teal-120);
  font: 500 13px/1.2 var(--font-sans);
}

.section { padding: var(--section-y-sm) 0; }
.band-muted { background: var(--color-surface-muted); }
.band-soft { background: var(--color-surface-soft); }
.band-dark { background: var(--color-surface-inverse); color: var(--color-text-inverse); }
.band-dark .muted, .band-dark .lede { color: var(--color-text-inverse-muted); }

/* Draft banner shown on every concept so nobody mistakes it for live. */
.draft-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--teal-140); color: var(--cream-40);
  font: 500 13px/1.3 var(--font-sans); padding: 8px var(--gutter);
  display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap;
}
.draft-bar a { color: var(--mint-100); text-decoration: none; }
.draft-bar a:hover { text-decoration: underline; }

/* Minimal site header */
.site-head { padding: 20px 0; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-head img { height: 34px; width: auto; }
.site-head nav { display: flex; gap: 28px; font-weight: 500; font-size: 15px; }
.site-head nav a { text-decoration: none; color: var(--color-text-muted); }
.site-head nav a:hover { color: var(--color-text); }
@media (max-width: 860px) { .site-head nav { display: none; } }

.site-foot { padding: 40px 0 128px; font-size: 14px; color: var(--color-text-subtle); }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.ph { outline: 1.5px dashed var(--color-accent); outline-offset: 3px; border-radius: 4px; }