/* =============================================
   TEHCS — Twitch Empire Home Care Service
   Global Stylesheet
   Brand: Navy #1B2B5E | Gold #F5A623 | Red #E63329
   Fonts: Barlow Condensed + Nunito
============================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;0,900;1,800&family=Nunito:wght@300;400;500;600;700&display=swap');

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito', sans-serif;
  background: #FAFAFA;
  color: #1a1a2e;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ── TOKENS ── */
:root {
  --navy:      #1B2B5E;
  --navy-dk:   #101D3F;
  --navy-md:   #253470;
  --gold:      #F5A623;
  --gold-dk:   #D4891A;
  --gold-lt:   #FFD580;
  --red:       #E63329;
  --red-dk:    #C0271E;
  --white:     #FFFFFF;
  --off:       #F7F8FC;
  --light:     #EEF1F8;
  --tmid:      #3D4466;
  --tmuted:    #7A82A8;
  --border:    rgba(27,43,94,.1);
  --sh-sm:     0 4px 16px rgba(27,43,94,.08);
  --sh-md:     0 12px 40px rgba(27,43,94,.14);
  --sh-lg:     0 28px 64px rgba(27,43,94,.2);
  --r-sm:  8px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  40px;
}

/* ── TYPE ── */
h1,h2,h3,h4,h5 {
  font-family: 'Barlow Condensed', sans-serif;
  line-height: 1.05;
  letter-spacing: -.01em;
}

/* ── LAYOUT ── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}
@media(max-width:900px)  { .container { padding: 0 24px; } }
@media(max-width:600px)  { .container { padding: 0 18px; } }

/* ── SHARED LABELS / BUTTONS ── */
.label {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .73rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 30px; border-radius: 100px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; border: 2px solid transparent;
  cursor: pointer; transition: all .25s;
}
.btn-gold   { background:var(--gold);  color:var(--navy-dk); border-color:var(--gold); }
.btn-gold:hover { background:var(--gold-dk); border-color:var(--gold-dk); transform:translateY(-2px); box-shadow:0 10px 28px rgba(245,166,35,.4); }
.btn-navy   { background:var(--navy);  color:var(--white);   border-color:var(--navy); }
.btn-navy:hover { background:var(--navy-dk); transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn-red    { background:var(--red);   color:var(--white);   border-color:var(--red); }
.btn-red:hover { background:var(--red-dk); transform:translateY(-2px); box-shadow:0 10px 28px rgba(230,51,41,.35); }
.btn-ghost  { background:transparent; color:var(--white);   border-color:rgba(255,255,255,.4); }
.btn-ghost:hover { background:rgba(255,255,255,.1); border-color:var(--white); }

/* ── REVEAL ANIMATIONS ── */
.rv, .rv-l, .rv-r {
  opacity: 0;
  transition: opacity .7s ease, transform .7s ease;
}
.rv   { transform: translateY(36px); }
.rv-l { transform: translateX(-42px); }
.rv-r { transform: translateX(42px); }
.rv.on, .rv-l.on, .rv-r.on { opacity: 1; transform: none; }

/* =============================================
   NAVBAR
============================================= */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  height: 70px; padding: 0 48px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(16,29,63,.97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(245,166,35,.14);
  transition: box-shadow .3s;
}
#nav.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,.35); }

.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.logo-box {
  width: 44px; height: 44px; border-radius: 9px;
  background: var(--gold); color: var(--navy-dk);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .85rem; font-weight: 900; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.logo-name { font-family:'Barlow Condensed',sans-serif; font-size:1.1rem; font-weight:800; color:#fff; letter-spacing:.06em; text-transform:uppercase; line-height:1.1; }
.logo-tag  { font-size:.58rem; color:var(--gold); font-weight:600; letter-spacing:.08em; text-transform:uppercase; }

.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-links a {
  padding: 8px 12px;
  font-family:'Barlow Condensed',sans-serif; font-size:.88rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color: rgba(255,255,255,.68); text-decoration: none;
  border-radius: 6px; transition: all .2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--gold); background: rgba(245,166,35,.08); }
.nav-links .nav-cta {
  background: var(--gold); color: var(--navy-dk) !important;
  border-radius: 100px !important; padding: 9px 20px !important;
  margin-left: 6px;
}
.nav-links .nav-cta:hover { background: var(--gold-dk) !important; }

.burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.burger span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:all .3s; }

/* =============================================
   PAGE HERO (inner pages)
============================================= */
.page-hero {
  padding: 140px 48px 90px;
  background: linear-gradient(140deg, var(--navy-dk) 0%, var(--navy) 55%, #2A3F7A 100%);
  position: relative; overflow: hidden; text-align: center;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 65% 40%, rgba(245,166,35,.11) 0%, transparent 60%);
}
.page-hero-bc {
  font-family:'Barlow Condensed',sans-serif; font-size:.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.38);
  margin-bottom:14px; position:relative;
}
.page-hero-bc a { color:var(--gold); text-decoration:none; }
.page-hero h1 {
  font-size: clamp(3rem,7vw,5.5rem); font-weight:900; color:#fff;
  margin-bottom: 16px; position: relative;
}
.page-hero h1 span { color:var(--gold); font-style:italic; }
.page-hero p {
  font-size:1.08rem; color:rgba(255,255,255,.6);
  max-width:580px; margin:0 auto; font-weight:300; line-height:1.75; position:relative;
}

/* =============================================
   TICKER BAND
============================================= */
.ticker { background:var(--red); padding:12px 0; overflow:hidden; white-space:nowrap; }
.ticker-inner { display:inline-flex; animation:ticker 38s linear infinite; }
.tick {
  font-family:'Barlow Condensed',sans-serif; font-size:.87rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; padding:0 26px;
}
.tick::after { content:'◆'; margin-left:26px; opacity:.38; }

/* =============================================
   SECTION BACKGROUNDS
============================================= */
.bg-off   { background:var(--off); }
.bg-white { background:var(--white); }
.bg-light { background:var(--light); }
.bg-navy  { background:var(--navy); }
.bg-dark  { background:var(--navy-dk); }
.bg-red   { background:var(--red); }

/* =============================================
   SERVICE CARDS (used on Services page)
============================================= */
.svc-card {
  background:var(--white); border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--border); transition:all .35s; cursor:default;
}
.svc-card:hover { transform:translateY(-7px); box-shadow:var(--sh-md); border-color:transparent; }
.svc-card-img   { height:200px; overflow:hidden; }
.svc-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .55s; }
.svc-card:hover .svc-card-img img { transform:scale(1.07); }
.svc-card-body  { padding:24px 26px 28px; }
.svc-card-body h3 {
  font-size:1.1rem; font-weight:800; color:var(--navy);
  text-transform:uppercase; letter-spacing:.03em; margin-bottom:8px;
}
.svc-card-body p { font-size:.87rem; line-height:1.7; color:var(--tmid); font-weight:300; margin-bottom:14px; }

/* tag pill */
.tag {
  display:inline-block;
  font-family:'Barlow Condensed',sans-serif; font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:4px 12px; border-radius:100px;
  margin-bottom:10px;
}
.tag-h { background:rgba(245,166,35,.14); color:var(--gold-dk); }
.tag-c { background:rgba(27,43,94,.1);    color:var(--navy-md); }
.tag-n { background:rgba(230,51,41,.1);   color:var(--red-dk); }

/* top accent */
.svc-card.h::before { content:''; display:block; height:4px; background:var(--gold); }
.svc-card.c::before { content:''; display:block; height:4px; background:var(--navy-md); }
.svc-card.n::before { content:''; display:block; height:4px; background:var(--red); }

/* =============================================
   REVIEW CARD
============================================= */
.rev-card { background:var(--off); border-radius:var(--r-md); padding:34px; border:1px solid var(--border); transition:all .3s; }
.rev-card:hover { transform:translateY(-5px); box-shadow:var(--sh-md); border-color:transparent; }
.rev-card.dark { background:var(--navy); border:none; }
.rev-q { font-family:'Barlow Condensed',sans-serif; font-size:3.2rem; font-weight:900; color:var(--gold); opacity:.5; line-height:1; margin-bottom:8px; }
.rev-stars { color:var(--gold); letter-spacing:2px; font-size:.88rem; margin-bottom:14px; }
.rev-text  { font-size:.95rem; line-height:1.75; color:var(--tmid); font-weight:300; margin-bottom:24px; }
.dark .rev-text { color:rgba(255,255,255,.68); }
.rev-who { display:flex; align-items:center; gap:12px; }
.rev-av  { width:46px; height:46px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--light); }
.rev-av img { width:100%; height:100%; object-fit:cover; }
.rev-name { font-family:'Barlow Condensed',sans-serif; font-size:.98rem; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.04em; }
.dark .rev-name { color:#fff; }
.rev-role { font-size:.76rem; color:var(--tmuted); font-weight:300; margin-top:2px; }
.dark .rev-role { color:rgba(255,255,255,.42); }

/* =============================================
   FOOTER
============================================= */
footer { background:var(--navy-dk); color:#fff; }
.footer-top {
  padding: 76px 48px 56px;
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:48px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.footer-brand p { font-size:.87rem; line-height:1.75; color:rgba(255,255,255,.42); font-weight:300; max-width:275px; margin-top:14px; }
.footer-social  { display:flex; gap:9px; margin-top:18px; }
.soc-btn {
  width:36px; height:36px; border-radius:8px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  text-decoration:none; transition:all .2s;
}
.soc-btn:hover { background:var(--gold); border-color:var(--gold); transform:translateY(-2px); }
.footer-col h4 {
  font-family:'Barlow Condensed',sans-serif; font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:18px;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col a { font-size:.87rem; color:rgba(255,255,255,.48); text-decoration:none; font-weight:300; transition:color .2s; }
.footer-col a:hover { color:var(--gold); }
.footer-bot {
  max-width:1200px; margin:0 auto; padding:20px 48px;
  display:flex; justify-content:space-between; align-items:center;
}
.footer-bot p { font-size:.78rem; color:rgba(255,255,255,.24); font-weight:300; }
.footer-bot a { font-size:.78rem; color:rgba(255,255,255,.32); text-decoration:none; margin-left:18px; transition:color .2s; }
.footer-bot a:hover { color:var(--gold); }

/* =============================================
   ANIMATIONS
============================================= */
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@keyframes pulse  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.35);opacity:.6} }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes float  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:none} }

/* =============================================
   RESPONSIVE
============================================= */
@media(max-width:1024px){
  .footer-top { grid-template-columns:1fr 1fr; }
}
@media(max-width:900px){
  #nav { padding:0 20px; }
  .nav-links { display:none; }
  .burger { display:flex; }
  .page-hero { padding:120px 24px 70px; }
  .footer-top { padding:50px 24px 44px; }
  .footer-bot { padding:18px 24px; flex-direction:column; gap:10px; text-align:center; }
}
@media(max-width:600px){
  .footer-top { grid-template-columns:1fr; padding:44px 18px 38px; }
  .page-hero h1 { font-size:2.8rem; }
}