@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;900&family=Alex+Brush&display=swap');

:root {
  --espresso: #3E2723;
  --espresso-2: #2C1B18;
  --butter: #FFEDAC;
  --cream: #F6F1E6;
  --beige: #DCCBBC;
  --chrome: linear-gradient(135deg, #f8f8fa, #e9e9eb 40%, #8b8b8f 70%, #f8f8fa);
  --cream-old: var(--cream);
  --sand: var(--beige);
  --brown: var(--espresso);
  --chocolate: var(--espresso-2);
  --gold: var(--butter);
  --white: var(--cream);
}

html { background: var(--cream); }
body, button, input, textarea, select { font-family: 'Archivo', Arial, sans-serif !important; }
body { background: var(--cream) !important; color: var(--espresso) !important; }
body::selection { background: var(--butter) !important; color: var(--espresso-2) !important; }

body.tsc-polished header {
  position: sticky !important;
  top: 0;
  background: rgba(246, 241, 230, .91) !important;
  border-bottom: 1px solid rgba(62, 39, 35, .13) !important;
  box-shadow: 0 10px 34px rgba(44, 27, 24, .06) !important;
  backdrop-filter: blur(18px);
}

body.tsc-polished .logo { width: clamp(132px, 13vw, 174px) !important; height: 64px !important; animation: none !important; filter: none !important; }
body.tsc-polished .logo img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
body.tsc-polished header nav { gap: clamp(12px, 2.1vw, 30px) !important; }
body.tsc-polished header nav a {
  color: var(--espresso) !important;
  font: 700 11px/1 'Archivo', sans-serif !important;
  letter-spacing: .14em !important;
}
body.tsc-polished header nav a:last-child {
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--butter);
  color: var(--espresso-2) !important;
}

h1, h2, h3, h4, h5, h6 { font-family: 'Archivo', Arial, sans-serif !important; font-weight: 900 !important; letter-spacing: -.045em !important; }
.eyebrow, .kicker, .label, .section-kicker, .small-title { font-family: 'Archivo', Arial, sans-serif !important; font-weight: 700 !important; letter-spacing: .16em !important; text-transform: uppercase; }
.signature-accent { font-family: 'Alex Brush', cursive !important; font-weight: 400 !important; letter-spacing: 0 !important; color: var(--butter); white-space: nowrap; }

body.tsc-polished :is(.button, .send-button, .contact-link, .work-link, .archive-toggle, .media-action) {
  border-radius: 999px !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 700 !important;
}
body.tsc-polished :is(.button, .send-button):first-of-type { background: var(--butter) !important; color: var(--espresso-2) !important; border-color: var(--butter) !important; }
:focus-visible { outline: 3px solid var(--butter) !important; outline-offset: 4px !important; }

body.home-page .hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 108px) !important;
  background: var(--espresso) !important;
  color: var(--cream) !important;
  padding-top: clamp(76px, 10vw, 132px) !important;
  padding-bottom: clamp(70px, 8vw, 110px) !important;
  overflow: hidden;
}
body.home-page .hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 2%; right: -4%;
  width: min(44vw, 610px); aspect-ratio: 1;
  background: url('assets/tsc-monogram-cream.svg') center/contain no-repeat;
  opacity: .075;
  pointer-events: none;
}
body.home-page .hero .eyebrow { color: var(--butter) !important; }
body.home-page .hero h1 { color: var(--cream) !important; font-size: clamp(48px, 6.5vw, 98px) !important; line-height: .91 !important; }
body.home-page .hero p { color: rgba(246, 241, 230, .78) !important; }
body.home-page .hero-actions .button:first-child { background: var(--butter) !important; color: var(--espresso-2) !important; border-color: var(--butter) !important; }
body.home-page .hero-actions .button:last-child { background: transparent !important; color: var(--cream) !important; border: 1.5px solid rgba(246,241,230,.58) !important; }
body.home-page .hero-card { background: rgba(246,241,230,.06) !important; border: 1px solid rgba(246,241,230,.15) !important; border-radius: 22px !important; box-shadow: 0 32px 90px rgba(20,10,8,.28) !important; }

.hero-filmstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px; background: var(--espresso-2); }
.hero-filmstrip img { width: 100%; height: clamp(105px, 14vw, 210px); object-fit: cover; border-radius: 12px; filter: saturate(.9); }

body.home-page #services { background: var(--cream) !important; }
body.home-page #services .number { display: none !important; }
body.home-page .service { border: 1.5px solid rgba(62,39,35,.17) !important; border-radius: 20px !important; background: rgba(246,241,230,.7) !important; }
body.home-page .service:hover { transform: translateY(-6px) !important; box-shadow: 0 22px 46px rgba(62,39,35,.1) !important; }

body.home-page #projects { background: var(--beige) !important; }
body.home-page .project { border-radius: 20px !important; border: 1px solid rgba(62,39,35,.12) !important; overflow: hidden; }

body.home-page #approach { background: var(--espresso) !important; color: var(--cream) !important; text-align: center; }
body.home-page #approach h2, body.home-page #approach p { color: var(--cream) !important; }
.approach-monogram { display: block; width: clamp(64px, 8vw, 108px); margin: 36px auto 0; opacity: .9; }

body.home-page .contact { background: var(--butter) !important; color: var(--espresso-2) !important; }
body.home-page .contact :is(h2,p,.eyebrow) { color: var(--espresso-2) !important; }
body.home-page .contact .button { background: var(--espresso) !important; color: var(--cream) !important; border-color: var(--espresso) !important; }

body.home-page footer, body.tsc-polished footer { background: var(--espresso-2) !important; color: var(--cream) !important; border-color: rgba(246,241,230,.12) !important; }
.brand-footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; width: 100%; }
.brand-footer img { width: 160px; height: auto; }
.brand-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.brand-footer a { color: var(--cream); text-decoration: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }

body:not(.home-page) main { background: var(--cream); }
body:not(.home-page) :is(.intro, .page-hero, .services-hero, .contact-hero, .studio-hero, .portfolio-hero) { background-color: var(--espresso) !important; color: var(--cream) !important; }
body:not(.home-page) :is(.intro, .page-hero, .services-hero, .contact-hero, .studio-hero, .portfolio-hero) :is(h1,h2,p,.eyebrow) { color: inherit !important; }
body.tsc-polished :is(.service-card, .offer-card, .archive-photo, .instagram-card, .inspiration-card) { border-radius: 20px !important; }

@media (max-width: 860px) {
  body.tsc-polished header { padding: 14px 5vw !important; }
  body.home-page .hero { grid-template-columns: 1fr !important; }
  body.home-page .hero::after { width: 72vw; right: -18%; }
  body.home-page .hero-card { min-height: 430px !important; }
  .brand-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 760px) {
  body.tsc-polished header { position: relative !important; flex-direction: column; gap: 10px; }
  body.tsc-polished header nav { justify-content: center !important; flex-wrap: wrap; }
  body.tsc-polished header nav a:last-child { padding: 10px 15px; }
  .hero-filmstrip { grid-template-columns: repeat(2, 1fr); }
  body.home-page .hero h1 { font-size: clamp(45px, 14vw, 72px) !important; }
}

@media (max-width: 560px) {
  body.tsc-polished .logo { width: 132px !important; height: 54px !important; }
  body.tsc-polished header nav { gap: 9px 14px !important; }
  body.tsc-polished header nav a { font-size: 9px !important; }
  body.home-page .hero { padding-left: 7vw !important; padding-right: 7vw !important; }
  body.home-page .hero-card { min-height: 340px !important; }
  .hero-filmstrip img { height: 118px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}