/*
Theme Name: Believe & Build
Theme URI: https://believeandbuild.co
Author: Tammie Lee
Author URI: https://believeandbuild.co
Description: Custom theme for Believe & Build — fractional sales and commercial leadership.
Version: 1.0
Text Domain: believe-and-build
*/

:root {
  --black: #000000;
  --white: #ffffff;
  --off-white: #f0f0f0;
  --purple: #7B4FD4;
  --coral: #F06040;
  --pink: #E8348A;
  --grey: #f4f4f4;
  --mid: #d8d8d8;
  --text: #111111;
  --muted: #717171;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--white); color:var(--text); font-family:'Hanken Grotesk',sans-serif; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; }

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.3rem 4rem;
  background:rgba(255,255,255,0.93);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--mid);
}
.logo {
  font-family:'Archivo',sans-serif; font-weight:800;
  color:var(--black); text-decoration:none;
  display:flex; align-items:center; gap:0.7rem;
}
.logo img { height:48px; width:auto; }
.nav-links { display:flex; gap:2.5rem; list-style:none; align-items:center; }
.nav-links a { color:var(--muted); text-decoration:none; font-size:0.85rem; transition:color 0.2s; }
.nav-links a:hover, .nav-links a.current { color:var(--black); }
.nav-cta {
  background:var(--pink) !important; color:var(--white) !important;
  padding:0.5rem 1.4rem; border-radius:2px; font-weight:500;
}
.nav-cta:hover { background:var(--purple) !important; }
.menu-toggle { display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--black); }

/* PAGE HERO (used on About/Services/Work/Resources) */
.page-hero {
  padding:9rem 4rem 4rem;
  max-width:900px;
}
.page-hero .eyebrow {
  font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--pink);
  margin-bottom:1.4rem; display:flex; align-items:center; gap:0.75rem;
}
.page-hero .eyebrow::before { content:''; display:block; width:28px; height:1px; background:var(--pink); }
.page-hero h1 {
  font-family:'Archivo',sans-serif; font-weight:800;
  font-size:clamp(2.5rem,4.5vw,4rem); line-height:1.05;
  color:var(--black); margin-bottom:1.5rem;
}
.page-hero .sub { font-size:1.05rem; line-height:1.75; color:var(--muted); max-width:560px; }

/* HOME HERO */
.hero {
  min-height:100vh;
  display:grid; grid-template-columns:1.1fr 0.9fr;
  align-items:center;
  padding:9rem 4rem 5rem;
  position:relative; overflow:hidden;
}
.hero-shapes { position:absolute; inset:0; z-index:0; pointer-events:none; }
.geo-purple {
  position:absolute; top:-80px; right:50px;
  width:360px; height:420px;
  background:var(--purple); border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity:0.1; animation:float 7s ease-in-out infinite;
}
.geo-coral {
  position:absolute; bottom:-50px; right:-20px;
  width:280px; height:280px;
  background:var(--coral); border-radius:0 50% 50% 0;
  opacity:0.13; animation:float 7s ease-in-out infinite reverse;
}
.geo-pink {
  position:absolute; bottom:130px; right:300px;
  width:54px; height:54px;
  background:var(--pink); border-radius:50%;
  opacity:0.6; animation:float 5s ease-in-out infinite 1.2s;
}
.dot-grid {
  position:absolute; right:55px; top:48%;
  display:grid; grid-template-columns:repeat(6,1fr); gap:16px;
  opacity:0.12;
}
.dot-grid span { width:4px; height:4px; background:var(--black); border-radius:50%; display:block; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

.hero-content { position:relative; z-index:1; max-width:600px; }
.eyebrow {
  font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--pink);
  margin-bottom:1.6rem; display:flex; align-items:center; gap:0.75rem;
}
.eyebrow::before { content:''; display:block; width:28px; height:1px; background:var(--pink); }

.hero h1 {
  font-family:'Archivo',sans-serif; font-weight:800;
  font-size:clamp(2.8rem,4.8vw,5rem); line-height:1.02;
  color:var(--black); margin-bottom:2rem;
}
.hero h1 .highlight { color:var(--purple); }
.hero-sub {
  font-size:1.05rem; line-height:1.75; color:var(--muted);
  max-width:460px; margin-bottom:3rem;
}
.hero-actions { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.btn-primary {
  background:var(--pink); color:var(--white); text-decoration:none;
  padding:1rem 2.2rem; font-family:'Archivo',sans-serif; font-weight:700;
  font-size:0.9rem; letter-spacing:0.06em; border-radius:2px;
  display:inline-flex; align-items:center; gap:0.5rem;
  transition:all 0.25s; border:none; cursor:pointer;
}
.btn-primary:hover { background:var(--purple); transform:translateY(-2px); }
.btn-primary .arrow { transition:transform 0.2s; }
.btn-primary:hover .arrow { transform:translateX(4px); }
.btn-ghost { color:var(--muted); text-decoration:none; font-size:0.9rem; transition:color 0.2s; }
.btn-ghost:hover { color:var(--black); }

/* B&B STATEMENT - dark band */
.statement-band {
  background:var(--black);
  padding:6rem 4rem;
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center;
}
.statement-band img { width:280px; max-width:100%; height:auto; margin:0 auto; }
.statement-copy { color:rgba(255,255,255,0.7); }
.statement-copy p { font-size:1.05rem; line-height:1.8; margin-bottom:1.5rem; }
.statement-copy strong { color:var(--white); font-weight:500; }
.statement-tag {
  display:inline-block; border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.45); font-size:0.72rem;
  letter-spacing:0.18em; text-transform:uppercase;
  padding:0.45rem 1.1rem; border-radius:2px;
}

/* SECTIONS */
.section { padding:6rem 4rem; }
.section-label {
  font-size:0.72rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--pink);
  margin-bottom:0.8rem; display:flex; align-items:center; gap:0.75rem;
}
.section-label::before { content:''; display:block; width:24px; height:1px; background:var(--pink); }
.section-title {
  font-family:'Archivo',sans-serif; font-weight:800;
  font-size:clamp(2rem,3.5vw,3.2rem); line-height:1.1;
  color:var(--black); margin-bottom:1rem;
}
.section-sub { color:var(--muted); font-size:1rem; line-height:1.7; max-width:500px; margin-bottom:3.5rem; }

/* SERVE GRID */
.serve-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--mid); border:1px solid var(--mid);
}
.serve-card { background:var(--white); padding:2.2rem; transition:background 0.2s; }
.serve-card:hover { background:var(--grey); }
.serve-arrow {
  display:inline-flex; width:26px; height:26px;
  background:var(--pink); color:var(--white); border-radius:2px;
  align-items:center; justify-content:center; font-size:0.85rem;
  margin-bottom:1rem;
}
.serve-card h3 { font-family:'Archivo',sans-serif; font-weight:700; font-size:0.95rem; margin-bottom:0.5rem; }
.serve-card p { font-size:0.85rem; color:var(--muted); line-height:1.65; }

/* SERVICES */
.services-section { padding:6rem 4rem; background:var(--black); }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,0.08); margin-top:3rem; }
.service-card { background:var(--black); padding:2.8rem 2.2rem; position:relative; transition:background 0.2s; }
.service-card:hover { background:#1a1a18; }
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.service-card:nth-child(1)::before { background:var(--purple); }
.service-card:nth-child(2)::before { background:var(--pink); }
.service-card:nth-child(3)::before { background:var(--coral); }
.service-num { font-family:'Archivo',sans-serif; font-size:3rem; font-weight:800; color:rgba(255,255,255,0.15); line-height:1; margin-bottom:0.8rem; }
.service-card h3 { font-family:'Archivo',sans-serif; font-weight:700; font-size:1.2rem; margin-bottom:0.5rem; color:var(--white); }
.service-mission { font-size:0.85rem; color:rgba(255,255,255,0.5); font-style:italic; margin-bottom:1.8rem; line-height:1.5; }
.service-list { list-style:none; display:flex; flex-direction:column; gap:0.5rem; }
.service-list li { font-size:0.85rem; color:rgba(255,255,255,0.8); padding-left:1.2rem; position:relative; line-height:1.45; }
.service-list li::before { content:'›'; position:absolute; left:0; color:var(--pink); font-weight:bold; }
.services-section .section-title { color:var(--white); }
.services-section .section-sub { color:rgba(255,255,255,0.6); }

/* SERVICES PAGE - business stage table */
.stage-table-wrap { overflow-x:auto; margin-top:3rem; }
.stage-table { width:100%; border-collapse:collapse; min-width:760px; }
.stage-table th {
  background:var(--black); color:var(--white);
  font-family:'Archivo',sans-serif; font-weight:700; font-size:0.85rem;
  text-align:left; padding:1rem 1.2rem; text-transform:uppercase; letter-spacing:0.05em;
}
.stage-table td {
  background:var(--grey); vertical-align:top;
  padding:1.2rem; font-size:0.9rem; color:var(--text); border-bottom:1px solid var(--mid);
}
.stage-table .row-label { background:var(--black); color:var(--white); font-weight:700; font-family:'Archivo',sans-serif; }
.stage-table .mission-row td { font-style:italic; color:var(--muted); background:var(--off-white); }
.stage-table ul { list-style:none; display:flex; flex-direction:column; gap:0.4rem; }
.stage-table li { padding-left:1rem; position:relative; }
.stage-table li::before { content:'›'; position:absolute; left:0; color:var(--pink); font-weight:bold; }

/* TESTIMONIALS */
.testimonials-section { padding:6rem 4rem; background:var(--white); }
.testimonials-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--mid); margin-top:3rem; }
.testimonial { background:var(--grey); padding:2.5rem; transition:background 0.2s; }
.testimonial:hover { background:var(--off-white); }
.quote-mark { font-family:'Archivo',sans-serif; font-size:3.5rem; line-height:1; color:var(--purple); margin-bottom:0.3rem; display:block; opacity:0.35; }
.testimonial p { font-size:0.95rem; line-height:1.75; color:var(--text); margin-bottom:1.5rem; font-style:italic; }
.testimonial-author { font-family:'Archivo',sans-serif; font-weight:700; font-size:0.72rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--pink); }

/* BRANDS */
.brands-section { padding:4.5rem 4rem; background:var(--black); text-align:center; }
.brands-label { font-size:0.72rem; letter-spacing:0.25em; text-transform:uppercase; color:rgba(255,255,255,0.35); margin-bottom:3rem; }
.brands-grid { display:flex; flex-wrap:wrap; gap:2.2rem 3.2rem; justify-content:center; align-items:center; max-width:900px; margin:0 auto; }
.brand-wordmark {
  font-family:'Archivo',sans-serif; font-size:1.1rem; font-weight:700;
  letter-spacing:0.01em; color:rgba(255,255,255,0.55);
  transition:color 0.25s, transform 0.25s;
}
.brand-wordmark:hover { color:rgba(255,255,255,0.95); transform:translateY(-2px); }

/* CTA */
.cta-section {
  padding:7rem 4rem; background:var(--white);
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center;
  border-top:1px solid var(--mid);
}
.cta-left h2 {
  font-family:'Archivo',sans-serif; font-weight:800;
  font-size:clamp(2.5rem,4vw,3.8rem); line-height:1.05;
  color:var(--black); margin-bottom:1.5rem;
}
.cta-left h2 .build-em { font-family:'Archivo',sans-serif; color:var(--purple); font-weight:800; }
.cta-left p { color:var(--muted); font-size:1rem; line-height:1.7; max-width:380px; margin-bottom:2.5rem; }
.cta-right { background:var(--black); padding:3rem; border-top:3px solid var(--pink); }
.cta-right h3 { font-family:'Archivo',sans-serif; font-weight:700; font-size:1.3rem; color:var(--white); margin-bottom:0.3rem; }
.cta-right .subtitle { color:rgba(255,255,255,0.45); font-size:0.85rem; margin-bottom:2rem; }
.contact-link { display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; text-decoration:none; transition:opacity 0.2s; }
.contact-link:hover { opacity:0.7; }
.contact-icon { width:34px; height:34px; background:rgba(255,255,255,0.07); border-radius:2px; display:flex; align-items:center; justify-content:center; font-size:0.85rem; flex-shrink:0; }
.contact-text { font-size:0.9rem; color:rgba(255,255,255,0.75); }
hr.divider { border:none; border-top:1px solid rgba(255,255,255,0.1); margin:1.8rem 0; }

/* CONTACT FORM (Work With Us page) */
.contact-form-wrap { background:var(--grey); padding:3rem; border-top:3px solid var(--pink); }
.contact-form-wrap h3 { font-family:'Archivo',sans-serif; font-weight:700; font-size:1.3rem; margin-bottom:0.4rem; color:var(--black); }
.contact-form-wrap .subtitle { color:var(--muted); font-size:0.85rem; margin-bottom:1.8rem; }
.form-group { margin-bottom:1.3rem; }
.form-group label { display:block; font-size:0.8rem; font-weight:600; color:var(--text); margin-bottom:0.4rem; letter-spacing:0.02em; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:0.8rem 1rem; border:1px solid var(--mid); border-radius:2px;
  background:var(--white); font-family:'Hanken Grotesk',sans-serif; font-size:0.92rem; color:var(--text);
}
.form-group textarea { resize:vertical; min-height:110px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--pink); }

/* Contact Form 7 styling */
.contact-form-wrap .wpcf7-form label {
  display:block; font-size:0.8rem; font-weight:600; color:var(--text);
  margin-bottom:1.3rem; letter-spacing:0.02em;
}
.contact-form-wrap .wpcf7-form input[type="text"],
.contact-form-wrap .wpcf7-form input[type="email"],
.contact-form-wrap .wpcf7-form select,
.contact-form-wrap .wpcf7-form textarea {
  display:block; width:100%; margin-top:0.4rem;
  padding:0.8rem 1rem; border:1px solid var(--mid); border-radius:2px;
  background:var(--white); font-family:'Hanken Grotesk',sans-serif; font-size:0.92rem; color:var(--text);
}
.contact-form-wrap .wpcf7-form textarea { resize:vertical; min-height:110px; }
.contact-form-wrap .wpcf7-form input:focus,
.contact-form-wrap .wpcf7-form select:focus,
.contact-form-wrap .wpcf7-form textarea:focus { outline:none; border-color:var(--pink); }
.contact-form-wrap .wpcf7-form input[type="submit"] {
  background:var(--pink); color:var(--white); border:none; cursor:pointer;
  padding:1rem 2.2rem; font-family:'Archivo',sans-serif; font-weight:700;
  font-size:0.9rem; letter-spacing:0.06em; border-radius:2px; transition:all 0.25s;
}
.contact-form-wrap .wpcf7-form input[type="submit"]:hover { background:var(--purple); transform:translateY(-2px); }
.contact-form-wrap .wpcf7-form .wpcf7-not-valid-tip { color:var(--coral); font-size:0.78rem; margin-top:0.3rem; font-weight:500; }
.contact-form-wrap .wpcf7-response-output { margin-top:1.2rem; padding:0.9rem 1.1rem; border-radius:2px; font-size:0.88rem; border:1px solid var(--mid); }
.contact-form-wrap .wpcf7-mail-sent-ok { border-color:var(--purple); color:var(--purple); background:rgba(123,79,212,0.06); }
.contact-form-wrap .wpcf7-validation-errors,
.contact-form-wrap .wpcf7-mail-sent-ng { border-color:var(--coral); color:var(--coral); background:rgba(240,96,64,0.06); }

/* RESOURCES / BLOG */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--mid); margin-top:3rem; }
.blog-card { background:var(--white); padding:2.2rem; transition:background 0.2s; }
.blog-card:hover { background:var(--grey); }
.blog-card .blog-tag { font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--pink); margin-bottom:0.8rem; display:block; }
.blog-card h3 { font-family:'Archivo',sans-serif; font-weight:700; font-size:1.05rem; margin-bottom:0.6rem; line-height:1.3; }
.blog-card p { font-size:0.88rem; color:var(--muted); line-height:1.6; margin-bottom:1rem; }
.blog-card .read-more { font-size:0.82rem; font-weight:600; color:var(--black); text-decoration:none; }
.empty-state {
  background:var(--grey); border:1px dashed var(--mid); border-radius:4px;
  padding:4rem 2rem; text-align:center; margin-top:3rem;
}
.empty-state p { color:var(--muted); font-size:0.95rem; }

/* FOOTER */
footer { background:var(--black); padding:2rem 4rem; display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,0.07); }
footer p { font-size:0.78rem; color:rgba(255,255,255,0.25); }
.footer-links { display:flex; gap:2rem; list-style:none; }
.footer-links a { font-size:0.78rem; color:rgba(255,255,255,0.25); text-decoration:none; transition:color 0.2s; }
.footer-links a:hover { color:var(--white); }

/* FADE IN */
.fade-in { opacity:0; transform:translateY(20px); transition:opacity 0.7s, transform 0.7s; }
.fade-in.visible { opacity:1; transform:none; }

/* RESPONSIVE */
@media (max-width:900px) {
  nav { padding:1.2rem 1.5rem; }
  .nav-links { display:none; }
  .hero { grid-template-columns:1fr; padding:7rem 1.5rem 4rem; }
  .page-hero { padding:7rem 1.5rem 3rem; }
  .statement-band { grid-template-columns:1fr; padding:4rem 1.5rem; gap:2.5rem; }
  .section, .services-section, .testimonials-section { padding:4rem 1.5rem; }
  .serve-grid { grid-template-columns:1fr 1fr; }
  .services-grid { grid-template-columns:1fr; }
  .testimonials-grid { grid-template-columns:1fr; }
  .blog-grid { grid-template-columns:1fr; }
  .cta-section { grid-template-columns:1fr; padding:4rem 1.5rem; gap:3rem; }
  .brands-section { padding:3rem 1.5rem; }
  footer { padding:1.5rem; flex-direction:column; gap:1rem; }
}