/* Tafuma premium layer — 2026-10-05 preview. Overrides shared patterns without replacing page CSS. */
:root {
  --prem-bg: #FBF4EC;
  --prem-ink: #14110F;
  --prem-muted: #5A534C;
  --prem-accent: #B83224;
  --prem-accent-deep: #8F2419;
  --prem-line: rgba(28, 20, 14, 0.11);
  --prem-card: #FFFFFF;
  --prem-shadow: 0 1px 1px rgba(28,20,14,.04), 0 18px 48px rgba(28,20,14,.09);
  --prem-shadow-soft: 0 10px 28px rgba(28,20,14,.07);
  --prem-radius: 18px;
  --prem-ease: cubic-bezier(.22,1,.36,1);
  --prem-space: clamp(1.25rem, 2.5vw, 2.25rem);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  color: var(--prem-ink);
  background:
    radial-gradient(1200px 520px at 12% -8%, rgba(232,160,144,.18), transparent 60%),
    radial-gradient(900px 480px at 92% 4%, rgba(192,57,43,.06), transparent 55%),
    var(--prem-bg);
  letter-spacing: -0.011em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Stronger type scale */
h1, .hero h1 {
  font-size: clamp(2.15rem, 4.6vw, 3.55rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  font-weight: 650 !important;
  max-width: 18ch;
}
h2 {
  font-size: clamp(1.55rem, 2.8vw, 2.15rem) !important;
  letter-spacing: -0.028em !important;
  line-height: 1.15 !important;
}
.intro, .product-lead, .standfirst, .lead, .sec-lead {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem) !important;
  line-height: 1.7 !important;
  color: var(--prem-muted) !important;
  max-width: 42rem;
}

/* Nav polish */
nav {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  background: rgba(251, 244, 236, 0.86) !important;
  backdrop-filter: blur(16px) saturate(1.15) !important;
  border-bottom-color: var(--prem-line) !important;
  transition: box-shadow .35s var(--prem-ease), background .35s var(--prem-ease);
}
nav.is-scrolled {
  box-shadow: 0 8px 28px rgba(28,20,14,.06);
  background: rgba(251, 244, 236, 0.94) !important;
}
.nav-logo {
  font-size: 1.15rem !important;
  letter-spacing: -0.03em !important;
}
.nav-cta, .btn-primary, a.btn-primary {
  background: var(--prem-accent) !important;
  border-color: var(--prem-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 0.72rem 1.25rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 8px 22px rgba(184,50,36,.22);
  transition: transform .25s var(--prem-ease), background .2s ease, box-shadow .25s var(--prem-ease);
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}
.nav-cta:hover, .btn-primary:hover, a.btn-primary:hover {
  background: var(--prem-accent-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(184,50,36,.28);
}
.btn-secondary, a.btn-secondary {
  border-radius: 999px !important;
  border: 1.5px solid rgba(184,50,36,.45) !important;
  color: var(--prem-accent) !important;
  background: transparent !important;
  padding: 0.68rem 1.2rem !important;
  font-weight: 600 !important;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .25s var(--prem-ease);
  text-decoration: none !important;
}
.btn-secondary:hover, a.btn-secondary:hover {
  background: rgba(184,50,36,.06) !important;
  transform: translateY(-1px);
}

/* Hero */
.hero {
  gap: clamp(1.5rem, 4vw, 3rem) !important;
  padding: clamp(2.4rem, 6vw, 4.5rem) 5% clamp(2.8rem, 6vw, 4.8rem) !important;
  align-items: center !important;
}
.hero-copy { max-width: 36rem; }
.hero-hello { margin-bottom: 0.85rem !important; }
.hello-mark { font-size: clamp(1.05rem, 1.5vw, 1.25rem) !important; color: var(--prem-accent) !important; font-weight: 600; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}
.hero-graphic {
  position: relative;
  border-radius: calc(var(--prem-radius) + 4px);
  overflow: hidden;
  box-shadow: var(--prem-shadow);
  background: #fff;
}
.hero-graphic::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(253,246,240,.08), transparent 45%);
  pointer-events: none;
}
.hero-graphic img {
  width: 100%;
  height: auto;
  transform: scale(1.01);
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--prem-accent);
  margin-bottom: .9rem;
}
.hero-kicker::before {
  content: "";
  width: 1.4rem; height: 2px; background: var(--prem-accent); border-radius: 2px;
}

/* Cards & sections */
.product-card, .proj-card, .tier, .help-card, .card, article.proj-card {
  border-radius: var(--prem-radius) !important;
  box-shadow: var(--prem-shadow-soft) !important;
  border: 1px solid var(--prem-line) !important;
  background: var(--prem-card) !important;
  transition: transform .35s var(--prem-ease), box-shadow .35s var(--prem-ease);
}
.product-card:hover, .proj-card:hover, .tier:hover {
  transform: translateY(-3px);
  box-shadow: var(--prem-shadow) !important;
}
.product, .projects-teaser, .help, .about, .watch, .newsletter, .proj-section, main, .wrap {
  /* breathing room */
}
section { scroll-margin-top: 5.5rem; }
.product, .projects-teaser, .help, .about {
  padding-top: clamp(2.5rem, 5vw, 4rem) !important;
  padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}
.product-visual img, .tier img {
  border-radius: 14px;
}

/* Services tiers */
.tier-grid { gap: 1.15rem !important; }
.tier {
  padding: 1.35rem 1.25rem 1.2rem !important;
}
.tier .tier-quote, a.tier-quote {
  margin-top: auto;
  font-weight: 700;
  color: var(--prem-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.tier .tier-quote:hover { text-decoration: underline; }

/* Motion reveals */
.prem-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--prem-ease), transform .7s var(--prem-ease);
}
.prem-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .prem-reveal { opacity: 1; transform: none; transition: none; }
  .product-card:hover, .proj-card:hover, .tier:hover { transform: none; }
  .nav-cta:hover, .btn-primary:hover, .btn-secondary:hover { transform: none; }
}

/* Footer */
footer {
  border-top: 1px solid var(--prem-line);
  background: #161210 !important;
}
footer a { transition: color .2s ease; }

/* Blog cards */
.blog-card, .post-card, [class*="blog"] article {
  border-radius: 16px;
}

/* Contact form polish if present */
input, textarea, select {
  border-radius: 12px !important;
  min-height: 44px;
}

/* Preview banner */
.prem-preview-banner {
  background: #161210;
  color: #f5ebe0;
  text-align: center;
  font-size: .82rem;
  letter-spacing: .02em;
  padding: .55rem 1rem;
  position: relative;
  z-index: 200;
}
.prem-preview-banner strong { color: #fff; }

/* Mobile tap / overflow safety */
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr !important; }
  .hero-actions { width: 100%; }
  .hero-actions .btn-primary, .hero-actions .btn-secondary { width: 100%; }
  .nav-cta-mobile { font-size: .82rem !important; padding: .55rem .85rem !important; }
}

.premium-about-strip .wrap { display:grid; grid-template-columns: repeat(3,1fr); gap:.75rem; }
@media (max-width:720px){
  .premium-about-strip .wrap { grid-template-columns: 1fr !important; }
  .premium-about-strip figure { max-height: 220px; }
}

/* Keep the mobile TWS CTA off desktop — original pages hide it via media query; our display:inline-flex was overriding that */
@media (min-width: 861px) {
  .nav-cta-mobile { display: none !important; }
}
@media (max-width: 860px) {
  .nav-links { /* leave page CSS to control open state */ }
  a.nav-cta.nav-cta-mobile {
    display: inline-flex !important;
  }
}

/* Phone header: one row (name left, menu right). Hero and menu already carry the TWS link. */
@media (max-width: 520px) {
  a.nav-cta.nav-cta-mobile { display: none !important; }
  nav > .nav-logo { flex: 1 1 auto; min-width: 0; }
  nav > .nav-end { margin-left: auto; flex: 0 0 auto; }
}


/* ========== Dark homepage hero (2026-10-05c) ========== */
.hero.hero--dark {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(2.6rem, 5.5vw, 4.25rem) 5% clamp(2.8rem, 5.5vw, 4.5rem) !important;
  background: #161210;
  color: #f5ebe0;
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
  align-items: center !important;
  gap: clamp(1.5rem, 4vw, 3rem) !important;
  position: relative;
  box-sizing: border-box;
}
.hero.hero--dark .hero-copy {
  max-width: 36rem;
  width: min(560px, 100%);
  justify-self: end;
}
.hero.hero--dark .hero-graphic {
  width: min(480px, 100%);
  justify-self: start;
}
/* Constrain the two columns as a unit on wide screens */
@media (min-width: 1100px) {
  .hero.hero--dark {
    padding-left: max(5%, calc((100% - 1120px) / 2 + 0%));
    padding-right: max(5%, calc((100% - 1120px) / 2 + 0%));
  }
}
.hero.hero--dark .hero-hello {
  color: #f5ebe0 !important;
  margin-bottom: 0.75rem !important;
}
.hero.hero--dark .hello-mark {
  color: #f0d6c8 !important;
}
.hero.hero--dark .hello-underline path {
  stroke: #c45c4a !important;
}
.hero.hero--dark h1 {
  color: #f5ebe0 !important;
  max-width: 16ch !important;
}
.hero.hero--dark .intro {
  color: #d8c8b8 !important; /* ~7:1 on #161210 */
  max-width: 40rem;
}
.hero.hero--dark .hero-actions .btn-primary {
  background: #c0392b !important;
  border-color: #c0392b !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(192,57,43,.35);
  min-height: 48px;
}
.hero.hero--dark .hero-actions .btn-primary:hover {
  background: #a5301f !important;
}
.hero.hero--dark .hero-actions .btn-secondary {
  background: transparent !important;
  border: 1.5px solid #e8d5c4 !important;
  color: #f5ebe0 !important;
  min-height: 48px;
}
.hero.hero--dark .hero-actions .btn-secondary:hover {
  background: rgba(245,235,224,.08) !important;
}
.hero.hero--dark .hero-graphic {
  margin: 0;
  background: #f5ebe0;
  border-radius: 20px;
  padding: 0.85rem;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  overflow: hidden;
}
.hero.hero--dark .hero-graphic img,
.hero.hero--dark .hero-graphic picture {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.hero.hero--dark .hero-arrow {
  display: none !important; /* decorative arrow removed on dark */
}
/* Clear break: light sticky header over dark band */
nav {
  border-bottom: 1px solid rgba(40,28,18,.10) !important;
}
.prem-preview-banner {
  border-bottom: 1px solid rgba(245,235,224,.12);
}

@media (max-width: 900px) {
  .hero.hero--dark {
    grid-template-columns: 1fr !important;
  }
  .hero.hero--dark .hero-copy,
  .hero.hero--dark .hero-graphic {
    width: 100%;
    justify-self: stretch;
    max-width: none;
  }
  .hero.hero--dark .hero-actions .btn-primary,
  .hero.hero--dark .hero-actions .btn-secondary {
    width: 100%;
  }
  .hero.hero--dark .hero-graphic {
    order: 2;
  }
  .hero.hero--dark .hero-copy {
    order: 1;
  }
}

/* Soften generic light-hero overrides so they don't fight non-home pages */