/* Light Theme Colors */
:root {
  /* warm, professional palette */
  --accent: #b45309; /* amber-700 */
  --accent-2: #c2410c; /* amber-600 */
  --bg: #fbfbfc; /* very light */
  --card: #ffffff;
  --muted: #6b7280; /* gray-500 */
  --surface: #ffffff;
  --text: #0f172a; /* slate-900 */
  --soft-accent: #fde68a; /* soft light amber */
  --header-height: 96px; /* approximate header height used to avoid overlap */
}

/* General Reset */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', Arial, sans-serif;
  line-height: 1.6;
  position: relative;
}

/* Subtle background design with concentric circles */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(34, 197, 94, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 40% 60%, rgba(99, 102, 241, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 60% 40%, rgba(16, 185, 129, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 10% 70%, rgba(59, 130, 246, 0.01) 0%, transparent 50%),
    radial-gradient(circle at 90% 30%, rgba(34, 197, 94, 0.01) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Make pages stretch so footer sticks to bottom on short pages */
html, body {height: 100%;}
body {display: flex; flex-direction: column;}
main {flex: 1 0 auto}

/* Header */
.topbar{background:transparent;padding:0.4rem 0.4rem;padding-left:0}
.contact-sm{display:flex;gap:0.9rem;justify-content:flex-end;font-size:.9rem;color:var(--muted);opacity:.95}
.main-nav{display:flex;align-items:center;justify-content:space-between;padding:.4rem .4rem;padding-left:0;background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent);backdrop-filter:blur(6px);border-radius:10px;margin:0;position:relative;z-index:20}
.brand{font-weight:800;letter-spacing:.4px;font-size:1.05rem;color:var(--text);display:flex;align-items:center;gap:8px}
.site-logo{height:70px;display:block;max-width:220px;margin:0;padding:0}
.header-tagline{font-size:1.2rem;color:var(--text);max-width:520px;display:inline-block;font-weight:700;margin-left:0}

/* Ensure the brand (logo + tagline) is left-justified and the logo image is flush-left */
.brand{justify-content:flex-start;margin-left:0;padding-left:0;align-items:flex-start}
.brand .site-logo{margin:0;padding:0;display:block}

/* Strong overrides to ensure logo and header text are exactly flush to the viewport left edge */
.topbar, .main-nav { padding-left: 0 !important; }
.brand { margin-left: 0 !important; padding-left: 0 !important; }
.brand .site-logo { display: block; margin-left: 0 !important; }
.brand .header-tagline { margin-left: 0 !important; padding-left: 0 !important; }

/* Give the brand a small left inset to mirror the right-side spacing (matches .main-nav padding) */
.brand-container{padding-left:0.4rem}

@media(max-width:700px){
  /* ensure on mobile the stacked brand content's left edges align exactly */
  .brand{padding-left:0 !important;align-items:flex-start}
  .brand .header-tagline{align-self:flex-start;margin-left:0 !important}
}

/* Move nav items closer to right edge by reducing gap on ul and li padding */
.main-nav ul{list-style:none;margin:0;display:flex;gap:.35rem;align-items:center}
.main-nav a{color:var(--muted);text-decoration:none;padding:.28rem .42rem;border-radius:6px}

/* Make .btn-apply look like our CTA button in nav and mobile menus */
.main-nav a.btn-apply, .main-nav a.btn-apply:link, .main-nav a.btn-apply:visited {
  background: var(--accent);
  color: #fff;
  padding: .6rem .9rem;
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none;
}
.main-nav a.btn-apply:hover{ background: var(--accent-2); color: #fff }

/* Hero: make vertically centered and avoid header overlap */
.hero{
   background: linear-gradient(rgba(13,28,46,0.45), rgba(13,28,46,0.35)), url('../barrett-coe-family-photograpy-02.jpg') center/cover no-repeat;
   color:#fff;padding:2rem 1rem;border-radius:8px;margin:0;margin-top:var(--header-height);min-height:calc(100vh - var(--header-height));
   display:flex;align-items:center;justify-content:center;
 }
.hero-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem}
.hero h1{margin:0 0 0.6rem 0;font-size:3rem;line-height:1.03;font-weight:800;text-align:center}
.hero h1 .hero-sub{display:block;font-size:1.35rem;font-weight:700;margin-top:0.35rem}
.hero p{margin:0 0 1.25rem 0}
.hero .cta{background:var(--accent);color:#fff;padding:.75rem 1.25rem;border-radius:6px;text-decoration:none;font-weight:700}
.hero .cta:hover{background:var(--accent-2)}

/* Ensure tagline stacks under logo on small screens and is left-aligned */
@media(max-width:700px){
  /* Keep brand stacked but left-aligned on mobile so logo and text sit on the left edge */
  .brand{flex-direction:column;align-items:flex-start;text-align:left;padding-left:0}
  .header-tagline{margin-top:6px;margin-left:0;align-self:flex-start}
  .site-logo{height:52px}
  .hero{min-height:70vh;padding:6rem 1rem 4rem 1rem}
  .hero-wrapper{align-items:center;text-align:center}
  .hero h1{margin-top:1.2rem;font-size:1.9rem;text-align:center;width:100%}
}

/* CTA attention animation: subtle pulsate */
.cta{animation: none}
.cta.pulse{animation: pulse 2.2s infinite ease-in-out;}
@keyframes pulse{
  0%{transform:scale(1);box-shadow:0 6px 18px rgba(180,83,9,0.06)}
  50%{transform:scale(1.04);box-shadow:0 14px 30px rgba(180,83,9,0.12)}
  100%{transform:scale(1);box-shadow:0 6px 18px rgba(180,83,9,0.06)}
}
.cta:hover{transform:scale(1.02)}
.cta{background:var(--accent);color:#fff;padding:.75rem 1.25rem;border-radius:6px;text-decoration:none;font-weight:700}
.cta:hover{background:var(--accent-2)}

/* Decorative background shapes */
.decorative-blob{position:absolute;pointer-events:none;opacity:.12}
.hero-wrapper{position:relative}

/* Cards / layout */
.container{max-width:1100px;margin:2rem auto;padding:0 1rem}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.card{background:var(--card);padding:1.25rem;border-radius:12px;border:1px solid #e9ecef;box-shadow:0 6px 18px rgba(18,38,63,0.04)}
.card h3{margin:.25rem 0;color:var(--text)}
.muted{color:var(--muted)}

/* Fancy headings without icons */
.fancy-heading{position:relative;padding-left:14px;font-weight:700;color:var(--text);margin:0 0 .5rem}
.fancy-heading::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:28px;border-radius:4px;background:var(--accent);}

/* Heading variants */
.heading-half-underline{display:inline-block;position:relative;padding-bottom:6px}
.heading-half-underline::after{content:'';position:absolute;left:0;bottom:0;height:6px;width:55%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:4px;opacity:.18}

.heading-box{display:inline-block;padding:.35rem .6rem;border-radius:8px;background:linear-gradient(180deg,#fff,#fff);border:1px solid #f1f5f9;font-weight:700}

.heading-accent-left{position:relative;padding-left:14px}
.heading-accent-left::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:calc(100% - 4px);background:var(--accent);border-radius:4px}

.testimonial-list, #testimonial-list {display:grid;gap:.75rem}
.testimonial-item{display:flex;gap:.75rem;align-items:flex-start}
.testimonial-photo{width:64px;height:64px;border-radius:8px;background:linear-gradient(180deg,var(--soft-accent),#fff);flex-shrink:0;border:1px solid rgba(0,0,0,0.04)}
.testimonial-item blockquote{margin:0;padding:0;color:var(--text)}

/* Timeline / process */
.timeline{display:flex;gap:1rem;align-items:stretch;flex-wrap:wrap}
.timeline{align-items:center}
.timeline .step{flex:1;min-width:200px;padding:1rem;border-radius:10px;border:1px solid #eef2f6;background:linear-gradient(180deg,#fff,#fff);position:relative}
.timeline .step .icon-wrap{width:46px;height:46px;border-radius:10px;background:var(--soft-accent);display:inline-flex;align-items:center;justify-content:center;margin-bottom:.6rem}
.timeline .step .icon-wrap{position:relative}
.timeline .connector{position:absolute;height:8px;background:linear-gradient(90deg,var(--accent),var(--accent-2));top:50%;right:-60px;width:54px;transform:translateY(-50%);border-radius:6px;opacity:.22}
.timeline .connector::after{content:'';position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid var(--accent-2);opacity:.9}
.timeline .step:last-child .connector{display:none}
.timeline .step .step-number{display:none}
.timeline .step-number{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:.5rem}
.timeline .step h4{margin:.25rem 0 .5rem}
.timeline p{margin:0;color:var(--muted)}

/* Timeline enhancements */
.timeline .step{transition:transform .18s ease,box-shadow .18s ease}
.timeline .step:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(18,38,63,0.06)}
.timeline .icon-caption{display:block;font-size:.78rem;color:var(--muted);margin-top:.25rem}
.timeline .connector{width:84px;right:-70px;opacity:.26}
.timeline .connector::after{border-left-color:var(--accent-2);right:-14px}
.timeline .icon-wrap svg{opacity:0.95}

.step-badge{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;box-shadow:0 4px 10px rgba(18,38,63,0.06)}
.timeline .icon-caption{display:block;font-size:.78rem;color:var(--muted);margin-top:.25rem}

/* Slightly stronger heading sizes for section headers */
.fancy-heading{font-size:1.05rem}
.heading-half-underline{font-size:1.05rem}
.heading-box{font-size:1.02rem}
.heading-accent-left{font-size:1.05rem}

@media(max-width:700px){
  .timeline{flex-direction:column}
  .timeline .connector{display:none}
  .testimonial-photo{width:48px;height:48px}
  .hero{padding:6rem 1rem 4.5rem 1rem}
}

/* Mobile footer smaller font and compact spacing */
@media(max-width:700px){
  footer p{font-size:0.8rem}
  footer .footer-links{gap:1rem}
  footer .footer-links a{font-size:0.85rem}
}

/* (Removed icon headings) */

/* Services grid visual styles */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.services-grid .item{display:flex;align-items:center;gap:.6rem;padding:.8rem;border-radius:8px;background:linear-gradient(180deg,#fff,#fff);border:1px solid #f1f5f9}
.services-grid .icon{width:36px;height:36px;border-radius:8px;background:var(--soft-accent);display:inline-flex;align-items:center;justify-content:center;color:var(--text);font-weight:700}

@media(max-width:700px){
  .services-grid{grid-template-columns:1fr}
  .hero{padding:5rem 1rem 3.5rem 1rem}
}

/* Form */
form{display:grid;gap:1rem}
fieldset{border:0;padding:0;margin:0}
label{display:block;font-size:.95rem;position:relative}
input,textarea,select{width:100%;padding:.75rem;border-radius:8px;border:1px solid #e6e9ee;background:#fff;color:var(--text)}
textarea{min-height:120px}
button{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:.75rem 1rem;border-radius:8px;border:none;font-weight:700}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.form-grid .full{grid-column:1/-1}

/* Reduce overcrowding on smaller screens: add side padding inside form cards and more breathing room */
@media(max-width:900px){
  .form-grid{gap:0.9rem}
  .card form, .card{padding-left:1rem;padding-right:1rem}
}

/* extra padding specifically for contact card to keep inputs away from right edge */
.contact-card{padding-left:1.25rem;padding-right:1.25rem}
/* ensure inputs in contact card don't overflow */
.contact-card input, .contact-card textarea{box-sizing:border-box;max-width:100%}

/* Prevent horizontal scroll caused by fixed widths or large elements */
html,body{overflow-x:hidden}

/* Give forms inside containers some side padding so inputs don't touch the page edge (helps apply page) */
.container > form{padding-left:0.75rem;padding-right:0.75rem}

/* Livelier success / result message */
.result{margin-top:1rem;padding:1rem;border-radius:8px;background:linear-gradient(90deg, rgba(16,185,129,0.12), rgba(34,197,94,0.06));color:var(--text);border:1px solid rgba(34,197,94,0.15)}
.result.success{background:linear-gradient(90deg, rgba(16,185,129,0.14), rgba(34,197,94,0.08));box-shadow:0 8px 24px rgba(16,185,129,0.06);color:#064e3b}
.result.error{background:linear-gradient(90deg, rgba(220,38,38,0.06), rgba(239,68,68,0.04));border:1px solid rgba(220,38,38,0.12);color:#7f1d1d}

/* ensure our lively .result styles above take effect (removed older duplicate) */

/* label helper to place the required star next to the label text */
.label-text{display:inline-block;margin-bottom:0.35rem}
label:has(input[required]) .label-text::after{content:' *';color:#dc2626;margin-left:6px;font-weight:700}

/* add side padding for containers on smaller screens to avoid inputs touching the viewport edge */
@media(max-width:900px){
  .container{padding-left:1.25rem;padding-right:1.25rem}
}

/* Footer */
footer{background:var(--card);color:var(--muted);padding:2rem 1rem;text-align:center;border-top:1px solid #e9ecef}
footer .footer-links{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1rem}
footer .footer-links a{color:var(--accent);text-decoration:none}
footer .footer-links a:hover{text-decoration:underline}
footer p{margin:0;font-size:0.9rem}

@media(min-width:900px){
	.hero-grid{grid-template-columns:1fr 420px}
	.hero h1{font-size:2rem}
	.form-grid{grid-template-columns:repeat(2,1fr)}
}

/* Sticky header + mobile nav */
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;background:var(--bg);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(0,0,0,0.1)}
.main-nav{position:relative;z-index:40}
body{padding-top:0}
.page-offset{padding-top:120px}
.hamburger{display:none;background:transparent;border:0;color:var(--muted);font-size:1.45rem;padding:.25rem}

@media(max-width:760px){
  /* hide top contact bar on mobile */
  .contact-sm{display:none}
  .main-nav{position:relative}
  /* mobile menu slides down with transform and opacity */
  .main-nav ul{display:flex;flex-direction:column;gap:0.5rem;background:#fff;color:var(--text);position:absolute;right:0;top:56px;padding:1rem;border-radius:8px;min-width:220px;box-shadow:0 10px 30px rgba(18,38,63,0.08);transform-origin:top right;transform:translateY(-12px) scale(.98);opacity:0;pointer-events:none;transition:transform .32s cubic-bezier(.2,.9,.2,1),opacity .28s ease}
  .main-nav.open ul{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
  .hamburger{display:inline-block}
  .main-nav .hamburger{order:2;margin-left:8px}
  .hero-inner{text-align:center}
  .hero-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}

  /* Make the Apply Now link in the mobile menu look like the CTA */
  .main-nav.open ul a.btn-apply {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: var(--accent);
    color: #fff;
    padding: .75rem 1.25rem;
    border-radius: 6px;
    font-weight: 800;
    text-align: center;
  }
  .main-nav.open ul a.btn-apply:hover { background: var(--accent-2); }
}

/* Testimonials */
#testimonial-list{position:relative;min-height:200px}
.testimonial-item{position:absolute;inset:0;display:flex;gap:1.25rem;align-items:flex-start;opacity:0;transition:opacity .5s ease}
.testimonial-item.active{opacity:1}
.testimonial-photo{width:120px;height:120px;border-radius:12px;background:linear-gradient(180deg,var(--soft-accent),#fff);flex-shrink:0;border:1px solid rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;padding:6px;box-sizing:border-box}
.testimonial-photo img{width:100%;height:100%;border-radius:10px;object-fit:contain;border:1px solid #e5e7eb;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.04);display:block}
#testimonial-list blockquote, .testimonial-item blockquote{font-size:1.1rem;line-height:1.7;margin:0;padding:0;color:var(--text)}

/* Newsletter */
#newsletterForm input{padding:.6rem;border-radius:8px;border:1px solid #cbd5e1;background:#fff;color:var(--text);transition:border-color .2s}
#newsletterForm input:focus{border-color:var(--accent)}

/* small animations */
.card{transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 8px 26px rgba(18,38,63,0.08)}

/* Enhanced features section hover effects */
.features .card:hover{transform:translateY(-8px);box-shadow:0 12px 32px rgba(18,38,63,0.12)}

/* Footer enhancements */
footer{display:block}
footer .footer-grid{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}
footer .footer-col{min-width:160px}

.timeline .connector, .timeline .connector::after { display: none !important; }


.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin:1rem 0}
.team-card{background:#fff;border:1px solid #eef2f6;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(18,38,63,0.06)}
.team-photo{width:100%;height:220px;object-fit:contain;display:block;padding:8px;box-sizing:border-box;background:#fff}
.team-body{padding:1rem;text-align:center}
.team-body h3{margin:.5rem 0 0}

.accordion{margin:2rem 0;display:grid;gap:.5rem}
.accordion details{border:1px solid #e9ecef;border-radius:10px;background:#fff;transition:box-shadow .2s ease}
.accordion summary{cursor:pointer;list-style:none;padding:.9rem 1rem;font-weight:600;position:relative;transition:background-color .2s ease}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:'+';position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:1.2rem;color:var(--accent);transition:transform .2s ease}
.accordion details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.accordion details[open]{box-shadow:0 8px 24px rgba(18,38,63,0.06)}
.accordion details p{padding:0 1rem 1rem 1rem;margin:0;color:var(--muted);transition:opacity .2s ease}

/* Add subtle animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 1s ease-in-out;
}

/* Pulsating animation for the Get Started button */
.cta.pulse {
  animation: pulse 2.2s infinite ease-in-out;
}
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 6px 18px rgba(180, 83, 9, 0.06); }
  50% { transform: scale(1.04); box-shadow: 0 14px 30px rgba(180, 83, 9, 0.12); }
  100% { transform: scale(1); box-shadow: 0 6px 18px rgba(180, 83, 9, 0.06); }
}

/* Apply fade-in to cards and timeline steps */
.card, .timeline .step {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
}

/* Ensure tagline stacks under logo on small screens */
@media(max-width:700px){
  /* Ensure the brand has an explicit container so its left edge can be pinned to viewport
    Use .brand-container for layout and keep .brand items stacked but left-aligned on mobile
    This replaces earlier conflicting rule that centered the brand on mobile. */
  .brand-container{display:flex;align-items:center;justify-content:flex-start;padding-left:0.4rem !important;margin-left:0}
  .brand{flex-direction:column;align-items:flex-start;text-align:left;padding-left:0;margin:0}
  .header-tagline{margin-top:6px;margin-left:0;align-self:flex-start}
  .hero{min-height:70vh;padding:6rem 1rem 4rem 1rem}
}