/* ============================================================
   Thumbs Up Painting Services - Brand Stylesheet
   Design tokens derived from the logo (red hexagon thumbs-up mark)
   and the weatherboard/interior job photography.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;700;800&family=Source+Sans+3:wght@400;500;600&display=swap');

:root{
  /* Colour */
  --tups-red:        #E7302A;
  --tups-red-dark:   #B81F1B;
  --tups-red-tint:   #FBE4E2;
  --tups-ink:        #1B1B1B;
  --tups-slate:      #4A4F55;
  --tups-paper:       #F6F5F2;
  --tups-paper-alt:   #FFFFFF;
  --tups-line:        #E2DFD8;

  /* Type */
  --font-display: 'Barlow Semi Condensed', sans-serif;
  --font-body:    'Source Sans 3', sans-serif;

  /* Rhythm */
  --radius: 6px;
  --shadow-card: 0 10px 30px -18px rgba(27,27,27,0.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--tups-ink);
  background:var(--tups-paper);
  line-height:1.55;
}
img{max-width:100%; display:block;}

.us_brand img{
max-width:420px;
}


a{color:inherit;}
.container{
  width:100%;
  max-width:1160px;
  margin:0 auto;
  padding:0 24px;
}
.eyebrow{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.8rem;
  color:var(--tups-red);
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.eyebrow::before{
  content:"";
  width:10px; height:10px;
  background:var(--tups-red);
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  display:inline-block;
}
h1,h2,h3,.font-display{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.05;
  margin:0 0 .4em;
  letter-spacing:-.01em;
}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);}
h3{font-size:1.25rem; font-weight:700;}
p{margin:0 0 1em;}
.lede{font-size:1.1rem; color:var(--tups-slate);}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  padding:.85em 1.6em;
  border-radius:var(--radius);
  border:2px solid transparent;
  transition:transform .15s ease, background .15s ease, color .15s ease;
  cursor:pointer;
  font-size:1rem;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--tups-red); color:#fff;}
.btn-primary:hover{background:var(--tups-red-dark);}
.btn-ghost{border-color:rgba(255,255,255,.7); color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.12);}
.btn-ghost-dark{border-color:var(--tups-ink); color:var(--tups-ink);}
.btn-ghost-dark:hover{background:var(--tups-ink); color:#fff;}

/* ---------- Header / Nav ---------- */
.tups-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--tups-line);
}
.tups-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.tups-nav .logo img{height:40px;}
.tups-nav ul{
  list-style:none; display:flex; gap:28px; margin:0; padding:0;
  font-family:var(--font-display); font-weight:700; letter-spacing:.02em;
}
.tups-nav ul a{text-decoration:none;}
.tups-nav ul a:hover{color:var(--tups-red);}
.tups-nav .call{
  display:flex; align-items:center; gap:10px;
}
.tups-nav .call a{
  font-family:var(--font-display); font-weight:800; text-decoration:none;
  color:var(--tups-ink);
}
.nav-toggle{display:none;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:min(88vh,720px);
  display:flex; align-items:flex-end;
  color:#fff;
  overflow:hidden;
}
.hero img.hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  z-index:0;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,18,17,.15) 0%, rgba(15,14,13,.55) 60%, rgba(10,9,8,.82) 100%);
  z-index:1;
}
.hero-hex{
  position:absolute;
  top:-10%; right:-6%;
  width:46vw; max-width:560px; aspect-ratio:1/1.05;
  border:2px solid rgba(255,255,255,.14);
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  z-index:1;
  pointer-events:none;
}
.hero-content{
  position:relative; z-index:2;
  padding:64px 0 56px;
}
.hero-content h1{
  font-size:clamp(2.2rem,5vw,3.4rem);
  max-width:14ch;
}
.hero-content .lede{color:#EDEAE5; max-width:52ch;}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:1.6em;}

/* ---------- Trust strip ---------- */
.trust-strip{
  background:var(--tups-ink); color:#fff;
  padding:34px 0;
}
.trust-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  text-align:center;
}
.trust-grid .stat-num{
  font-family:var(--font-display); font-weight:800; font-size:2rem;
  color:var(--tups-red);
}
.trust-grid .stat-label{
  font-size:.85rem; color:#C9C6C0; letter-spacing:.03em;
}

/* ---------- Services ---------- */
.section{padding:80px 0;}
.section-head{max-width:640px; margin-bottom:44px;}
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.service-card{
  background:var(--tups-paper-alt);
  border:1px solid var(--tups-line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column;
}
.service-card .thumb{height:190px; overflow:hidden;}
.service-card .thumb img{width:100%; height:100%; object-fit:cover;}
.service-card .body{padding:22px 22px 26px; flex:1; display:flex; flex-direction:column;}
.service-card p{color:var(--tups-slate); font-size:.96rem;}
.service-card .learn{
  margin-top:auto; font-family:var(--font-display); font-weight:700;
  color:var(--tups-red); text-decoration:none; font-size:.92rem;
}

/* ---------- About teaser ---------- */
.about-split{
  display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;
}
.about-split .thumb{
  position:relative;
  /* clip-path:polygon(10% 0%,90% 0%,100% 18%,100% 100%,0% 100%,0% 18%); */
  border-radius:var(--radius);
  overflow:hidden;
  border-radius: 1rem;
}
.guarantee-badge{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--tups-red-tint); border:1px solid var(--tups-red);
  padding:12px 18px; border-radius:var(--radius);
  font-family:var(--font-display); font-weight:700; color:var(--tups-red-dark);
  margin-top:1em;
}

/* ---------- Process ---------- */
.process-section{background:var(--tups-paper-alt); border-top:1px solid var(--tups-line); border-bottom:1px solid var(--tups-line);}
.process-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;
}
.process-step{
  text-align:center; padding:0 18px; position:relative;
}
.process-step .hex{
  width:64px; height:64px; margin:0 auto 18px;
  background:var(--tups-ink);
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; color:#fff; font-size:1.2rem;
}
.process-step:not(:last-child)::after{
  content:"";
  position:absolute; top:32px; left:calc(50% + 44px); width:calc(100% - 88px);
  height:2px; background:var(--tups-line);
}
.process-step p{color:var(--tups-slate); font-size:.92rem;}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--tups-red); color:#fff; padding:56px 0; text-align:center;
}
.cta-band h2{color:#fff;}
.cta-band .btn-ghost{border-color:#fff;}

/* ---------- Footer ---------- */
.tups-footer{background:var(--tups-ink); color:#C9C6C0; padding:52px 0 28px;}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; margin-bottom:32px;
}
.tups-footer h3{color:#fff; font-size:1rem;}
.tups-footer .logo img{height:32px; margin-bottom:14px;}
.tups-footer a{color:#C9C6C0; text-decoration:none;}
.tups-footer a:hover{color:var(--tups-red);}
.tups-footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-top:20px;
  font-size:.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

/* ---------- Contact page ---------- */
.contact-wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start;}
.contact-card{
  background:var(--tups-paper-alt); border:1px solid var(--tups-line);
  border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-card);
}
.contact-card .row{display:flex; gap:14px; margin-bottom:18px; align-items:flex-start;}
.contact-card .hex-icon{
  width:38px; height:38px; flex:0 0 38px;
  background:var(--tups-red);
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:.95rem; font-weight:700;
}
form.quote-form{
  background:var(--tups-paper-alt); border:1px solid var(--tups-line);
  border-radius:var(--radius); padding:34px; box-shadow:var(--shadow-card);
}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-grid .full{grid-column:1/-1;}
.field label{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:.85rem; margin-bottom:6px; letter-spacing:.02em;
}
.field input, .field select, .field textarea{
  width:100%; padding:.75em .9em; border:1px solid var(--tups-line);
  border-radius:var(--radius); font-family:var(--font-body); font-size:.98rem;
  background:#fff; color:var(--tups-ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--tups-red); outline-offset:1px; border-color:var(--tups-red);
}
.field textarea{resize:vertical; min-height:120px;}
.form-msg{
  margin-top:16px; padding:12px 16px; border-radius:var(--radius); font-size:.92rem; display:none;
}
.form-msg.success{display:block; background:#E7F5EA; color:#1E6B34; border:1px solid #B7E0C1;}
.form-msg.error{display:block; background:#FBE4E2; color:var(--tups-red-dark); border:1px solid var(--tups-red);}
.submit-row{margin-top:8px; display:flex; align-items:center; gap:16px;}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .services-grid{grid-template-columns:1fr;}
  .about-split{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr 1fr; row-gap:36px;}
  .process-step:not(:last-child)::after{display:none;}
  .trust-grid{grid-template-columns:1fr; gap:18px;}
  .footer-grid{grid-template-columns:1fr; gap:24px;}
  .contact-wrap{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .tups-nav ul{display:none;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .btn{transition:none;}
}


/* ---------- Testimonials (append to tups-brand.css) ---------- */
.testimonials-section{background:var(--tups-paper-alt); border-top:1px solid var(--tups-line); border-bottom:1px solid var(--tups-line);}
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:24px;
}
.testimonial-card{
  margin:0;
  background:var(--tups-paper);
  border:1px solid var(--tups-line);
  border-radius:var(--radius);
  padding:24px 26px;
  box-shadow:var(--shadow-card);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.testimonial-card .stars{
  color:var(--tups-red);
  font-size:1rem;
  letter-spacing:.1em;
}
.testimonial-quote{
  margin:0;
  font-size:.96rem;
  color:var(--tups-ink);
  line-height:1.6;
}
.testimonial-name{
  font-family:var(--font-display);
  font-weight:700;
  font-style:normal;
  font-size:.88rem;
  color:var(--tups-slate);
}



/* 
/////CEO ETC */


/* Marketing Ops Hub - link this alongside tups-brand.css for shared tokens */

.checklist-group{ margin-bottom:36px; }
.checklist-category{
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  text-transform:uppercase; letter-spacing:.04em; color:var(--tups-slate);
  margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--tups-line);
}
.checklist-table{ display:flex; flex-direction:column; gap:8px; }
.checklist-row{
  display:grid; grid-template-columns:150px 1fr 90px;
  gap:16px; align-items:center;
  background:var(--tups-paper-alt); border:1px solid var(--tups-line);
  border-radius:var(--radius); padding:14px 16px;
}
.cl-label strong{ font-size:.95rem; }
.cl-notes-display{ font-size:.84rem; color:var(--tups-slate); margin-top:3px; }
.cl-open{
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  color:var(--tups-red); text-decoration:none; white-space:nowrap;
}

select.cl-status-select, select.lead-status-select{
  width:100%; border-radius:var(--radius); border:1px solid var(--tups-line);
  padding:.5em .6em; font-family:var(--font-display); font-weight:700; font-size:.82rem;
  cursor:pointer;
}
.status-not_started{ background:#F1EFEA; color:var(--tups-slate); }
.status-in_progress{ background:#FDF1D8; color:#8A5A00; border-color:#F0D999 !important; }
.status-done{ background:#E7F5EA; color:#1E6B34; border-color:#B7E0C1 !important; }
.status-new{ background:#E4ECFB; color:#2450A8; border-color:#BFD1F5 !important; }
.status-contacted{ background:#FDF1D8; color:#8A5A00; border-color:#F0D999 !important; }
.status-quoted{ background:#F3E8FB; color:#6B2F9E; border-color:#DCC0F2 !important; }
.status-won{ background:#E7F5EA; color:#1E6B34; border-color:#B7E0C1 !important; }
.status-lost{ background:#FBE4E2; color:var(--tups-red-dark); border-color:var(--tups-red) !important; }

.leads-table{ display:flex; flex-direction:column; gap:6px; }
.leads-row{
  display:grid; grid-template-columns:1.2fr 1.4fr 1fr .9fr 1fr;
  gap:16px; align-items:center; padding:12px 16px;
  background:var(--tups-paper-alt); border:1px solid var(--tups-line); border-radius:var(--radius);
  font-size:.9rem;
}
.leads-row.leads-head{
  background:transparent; border:none; padding:0 16px;
  font-family:var(--font-display); font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.03em; color:var(--tups-slate);
}
.leads-row a{ color:var(--tups-ink); text-decoration:none; }
.leads-row a:hover{ color:var(--tups-red); }
.lead-sub{ font-size:.78rem; color:var(--tups-slate); margin-top:2px; }

@media (max-width: 800px){
  .checklist-row{ grid-template-columns:1fr; }
  .leads-row{ grid-template-columns:1fr; }
  .leads-row.leads-head{ display:none; }
}