/* Mobile-first stylesheet for Green River Business Consulting
   Color palette extracted from provided artwork:
   --gr-blue: #4DA1D9 (primary blue)
   --gr-pink: #FF4DA6 (accent pink)
   --gr-cream: #F7EDE3 (background/neutral)
   --gr-black: #0E0E10 (text)
   Updated: larger header logo, company name, brand & team section, responsive rules
*/

:root{
  --gr-blue: #4da1d9;
  --gr-pink: #ff4da6;
  --gr-cream: #f7ede3;
  --gr-black: #0e0e10;
  --max-width: 1200px;

  --radius: 12px;
  --gap: 1rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;

  --shadow-soft: 0 6px 18px rgba(14,14,16,0.08);
  --shadow-xs: 0 2px 6px rgba(14,14,16,0.06);
}

/* Global resets and base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--gr-black);
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(77,161,217,0.06), transparent 8%),
    radial-gradient(900px 400px at 90% 90%, rgba(255,77,166,0.03), transparent 10%),
    linear-gradient(180deg, #ffffff 0%, var(--gr-cream) 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
}

/* Utility: visually hidden (for screen readers) */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Layout containers */
.header-inner, .hero-inner, .about-inner, .footer-inner {
  max-width:var(--max-width);
  margin:0 auto;
  padding:var(--space-md);
  display:flex;
  align-items:center;
  gap:var(--gap);
}

/* Header - logo doubled in size (100% larger) and company name added */
.site-header{
  position:sticky;
  top:0;
  background:rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(14,14,16,0.04);
  z-index:50;
}
.logo img{
  /* originally 46px — 100% larger -> 92px */
  height:92px;
  width:auto;
  display:block;
}
.company-wrap{
  display:flex;
  align-items:center;
  margin-left:0.5rem;
  flex:1;
}
.company-name{
  font-weight:700;
  color:var(--gr-black);
  font-size:1rem;
  display:block;
  margin-left:0.75rem;
  line-height:1.05;
}

/* On small screens keep the header compact */
@media(max-width:539px){
  .header-inner{
    align-items:center;
    gap:0.5rem;
  }
  .logo img{
    height:72px; /* slightly smaller for narrow screens while still larger than before */
  }
  .company-name{
    font-size:0.95rem;
    display:block;
  }
}

/* Larger screens: align name, make it more prominent */
@media(min-width:720px){
  .company-name{
    font-size:1.2rem;
  }
}

/* Nav toggle */
.nav-toggle{
  margin-left:auto;
  background:none;
  border:0;
  padding:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.hamburger{
  width:26px;
  height:2px;
  background:var(--gr-black);
  display:block;
  position:relative;
}
.hamburger::before, .hamburger::after{
  content:"";
  position:absolute;
  left:0;
  width:26px;
  height:2px;
  background:var(--gr-black);
}
.hamburger::before{top:-8px}
.hamburger::after{top:8px}

.site-nav{ padding:0 var(--space-md) var(--space-md) var(--space-md) }
.site-nav ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.5rem}
.site-nav a{ text-decoration:none; color:var(--gr-black); padding:0.5rem 0; display:block }

/* HERO */
.hero{ padding:var(--space-lg) 0 0 }
.hero-inner{ flex-direction:column-reverse; gap:var(--space-md) }
.hero-copy{ text-align:left }
.hero h1{
  font-size:1.6rem;
  margin:0 0 0.5rem 0;
  color:var(--gr-black);
  letter-spacing:0.01em;
  line-height:1.08;
}
.lead{ color:rgba(14,14,16,0.78); margin:0 0 var(--space-md) 0; font-size:0.98rem }
.hero-cta{ display:flex; gap:0.5rem; flex-wrap:wrap }
.btn{
  display:inline-block;
  text-decoration:none;
  border-radius:10px;
  padding:0.6rem 0.9rem;
  font-weight:600;
  font-size:0.95rem;
  border:1px solid transparent;
}
.btn.primary{ background:var(--gr-blue); color:white; box-shadow:var(--shadow-xs) }
.btn.ghost{ background:transparent; color:var(--gr-black); border-color:rgba(14,14,16,0.06) }

.contact-inline{
  margin-top:0.9rem;
  display:flex;
  gap:0.5rem;
  align-items:center;
  color:rgba(14,14,16,0.9);
}
.contact-inline svg{ color:var(--gr-blue) }

/* Phone icon (replaces visible phone link in header) */
.phone-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--gr-blue),var(--gr-pink));
  color:white;
  text-decoration:none;
  box-shadow:var(--shadow-xs);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.phone-icon svg{ width:20px; height:20px; fill:white; display:block }
.phone-icon:hover,
.phone-icon:focus{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(14,14,16,0.12);
  opacity:0.98;
}
.phone-icon:focus{ outline:3px solid rgba(77,161,217,0.18); outline-offset:3px; }

/* phone number in contact area remains visible there for clarity */
.phone{ color:var(--gr-black); text-decoration:none; font-weight:600 }

/* hero image */
.hero-image{ width:100%; border-radius:12px; overflow:hidden; box-shadow:var(--shadow-soft); margin-bottom:var(--space-md) }
.hero-image img{ width:100%; height:auto; display:block; object-fit:cover; }

/* Sections */
.section{ padding:var(--space-lg) var(--space-md) }
.section-header{ text-align:left; margin-bottom:var(--space-md) }
.section-header h2{ margin:0 0 0.25rem 0; font-size:1.1rem }
.section-sub{ margin:0; color:rgba(14,14,16,0.7) }

/* Cards */
.cards{ display:grid; grid-template-columns:1fr; gap:var(--space-md) }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.9));
  border-radius:12px;
  padding:var(--space-md);
  box-shadow:var(--shadow-xs);
  display:flex;
  gap:var(--space-md);
  align-items:flex-start;
}
.card-icon{ width:46px; height:46px; border-radius:10px; background:linear-gradient(135deg,var(--gr-blue),var(--gr-pink)); display:flex; align-items:center; justify-content:center; color:white; flex-shrink:0 }
.card h3{ margin:0 0 0.25rem 0; font-size:1rem }
.card p{ margin:0; color:rgba(14,14,16,0.75) }

/* About */
.about-inner{ flex-direction:column; gap:var(--space-md) }
.about-image img{ width:100%; border-radius:12px; box-shadow:var(--shadow-soft); display:block }
.about-copy .about-list{ margin-top:0.5rem; padding-left:1rem }

/* Brand & Team section */
.brand-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:var(--space-md);
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
  align-items:center;
}
.brand-logo img{
  width:180px;
  height:auto;
  display:block;
  margin:0 auto;
  filter: none;
}
.team-card{
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
  align-items:center;
  width:100%;
  max-width:920px;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94));
  border-radius:12px;
  box-shadow:var(--shadow-xs);
  padding:var(--space-md);
}
.team-image img{
  width:160px;
  height:160px;
  object-fit:cover;
  border-radius:12px;
  box-shadow:var(--shadow-soft);
  display:block;
}
.team-info{ text-align:center; padding:0 var(--space-sm) }
.team-info h3{ margin:0 0 0.25rem 0; font-size:1.05rem }
.team-title{ color:rgba(14,14,16,0.7); margin:0 0 0.5rem 0; font-weight:600 }
.team-bio{ margin:0 0 0.5rem 0; color:rgba(14,14,16,0.8) }
.team-contact a{ color:var(--gr-blue); text-decoration:none; font-weight:600 }

/* Testimonials */
.testimonial-list{ display:flex; flex-direction:column; gap:var(--space-sm) }
.testimonial{ background:linear-gradient(180deg, rgba(255,255,255,0.94), white); padding:var(--space-md); border-radius:10px; box-shadow:var(--shadow-xs) }
.testimonial p{ margin:0 0 0.5rem 0 }

/* Contact grid */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-md) }
.contact-form{ background:white; padding:var(--space-md); border-radius:12px; box-shadow:var(--shadow-xs) }
.contact-form label{ display:block; font-size:0.85rem; margin-bottom:0.25rem }
.contact-form input, .contact-form textarea{
  width:100%;
  padding:0.6rem;
  border-radius:8px;
  border:1px solid rgba(14,14,16,0.08);
  margin-bottom:0.75rem;
  font-size:0.95rem;
}
.form-note{ margin-top:0.5rem; color:rgba(14,14,16,0.7) }
.form-status{ margin-top:0.5rem; color:var(--gr-blue) }

/* Contact info */
.contact-info{ background:linear-gradient(135deg,var(--gr-cream),white); padding:var(--space-md); border-radius:12px; box-shadow:var(--shadow-xs) }

/* Social links (updated) */
.social{
  display:flex;
  gap:0.5rem;
  margin-top:0.75rem;
}
.social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--gr-blue),var(--gr-pink));
  color:white;
  text-decoration:none;
  box-shadow:var(--shadow-xs);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.social-link svg{ width:20px; height:20px; fill:white; display:block }
.social-link:focus{ outline:3px solid rgba(77,161,217,0.18); outline-offset:3px; }
.social-link:hover, .social-link:focus{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(14,14,16,0.12);
  opacity:0.98;
}

/* Footer */
.site-footer{ margin-top:var(--space-lg); padding:var(--space-md) 0; border-top:1px solid rgba(14,14,16,0.04) }
.footer-inner{ display:flex; flex-direction:column; gap:0.5rem; max-width:var(--max-width); margin:0 auto; padding:0 var(--space-md) }

/* Responsive / Desktop tweaks */
@media(min-width:720px){
  .hero-inner{ flex-direction:row; align-items:center }
  .hero-copy{ flex:1; padding-right:var(--space-md) }
  .hero-image{ flex:1; margin-bottom:0 }

  /* services grid: 3 columns at medium screens */
  .cards{ grid-template-columns:repeat(3,1fr) }
  .card p{ font-size:0.96rem }

  .about-inner{ flex-direction:row; align-items:center }
  .about-image{ flex:1 }
  .about-copy{ flex:1 }

  .contact-grid{ grid-template-columns:2fr 1fr }
  .site-nav ul{ flex-direction:row }
  .site-nav a{ padding:1rem }
  .nav-toggle{ display:none }

  .hero h1{ font-size:2rem }
  .lead{ font-size:1rem }

  /* Brand & Team layout side-by-side on larger screens */
  .brand-inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
  }
  .brand-logo img{
    width:320px;
  }
  .team-card{
    flex-direction:row;
    align-items:center;
    padding:1rem;
  }
  .team-image img{
    width:160px;
    height:160px;
    margin-right:1rem;
  }
  .team-info{ text-align:left; padding:0 }
}

/* Larger desktop */
@media(min-width:1100px){
  .header-inner, .hero-inner, .about-inner, .footer-inner { padding: calc(var(--space-md) * 1.5); }
  /* services grid: 4 columns on wide screens */
  .cards{ grid-template-columns:repeat(4,1fr); gap:1.25rem }
  .hero h1{ font-size:2.4rem }
  .card-icon{ width:52px; height:52px }
  .card{ padding:1rem }
  .hero-image img{ max-height:520px; object-fit:cover }

  .brand-logo img{ width:420px; }
  .team-image img{ width:200px; height:200px }
  .team-card{ max-width:980px; padding:1.25rem; }
}

/* Utility */
.small{ font-size:0.85rem; color:rgba(14,14,16,0.6) }

/* Icon row container */
.contact-icons{
  display:flex;
  gap:0.6rem;
  align-items:center;
  margin-top:0.75rem;
}

/* Shared icon button styles */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:10px;
  color:white;
  text-decoration:none;
  box-shadow:var(--shadow-xs);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  background:linear-gradient(135deg,var(--gr-blue),var(--gr-pink));
}

/* Make svg size consistent and white */
.icon-btn svg{
  width:20px;
  height:20px;
  display:block;
  fill: white;
  stroke: none;
}

/* The mail icon svg uses stroke in the provided path; ensure it's visible */
.mail-link svg{
  stroke: white;
  stroke-width: 1.6;
  fill: none; /* keep envelope outline */
}

/* Hover & focus states */
.icon-btn:hover,
.icon-btn:focus{
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(14,14,16,0.12);
  opacity: 0.98;
}
.icon-btn:focus{
  outline: 3px solid rgba(77,161,217,0.18);
  outline-offset: 3px;
}

/* Ensure contact-inline (if used elsewhere) aligns with icons */
.contact-inline{
  display:flex;
  align-items:center;
  gap:0.5rem;
}

/* If you want the visible phone and email text to sit on the same horizontal
   baseline as the icons on wider screens, make the contact-info display flex. */
@media(min-width:720px){
  .contact-info{
    display:flex;
    flex-direction:column; /* keep stacked on mobile */
    gap:0.5rem;
  }
  /* Optionally, align text and icons in a single row on wide screens:
  .contact-info { flex-direction:row; align-items:center; justify-content:space-between; }
  .contact-icons { margin-top: 0; }
  */
}

.contact-form{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
  border-radius: 12px;
  padding: 1rem;
  box-shadow: var(--shadow-xs);
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
}

/* Form rows */
.contact-form .form-row{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  margin-bottom:0.9rem;
}

/* Labels */
.contact-form label{
  font-size:0.9rem;
  color: rgba(14,14,16,0.85);
  font-weight:600;
}

/* Inputs & textarea */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea{
  width:100%;
  padding:0.65rem 0.8rem;
  border-radius:10px;
  border:1px solid rgba(14,14,16,0.08);
  background: #fff;
  font-size:0.95rem;
  color:var(--gr-black);
  transition: box-shadow .12s ease, border-color .12s ease, transform .06s ease;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Placeholder color */
.contact-form ::placeholder{
  color: rgba(14,14,16,0.45);
}

/* Focus states */
.contact-form input:focus,
.contact-form textarea:focus{
  outline: none;
  border-color: rgba(77,161,217,0.85); /* theme blue */
  box-shadow: 0 6px 18px rgba(77,161,217,0.08);
  transform: translateY(-1px);
}

/* Buttons aligned with form */
.contact-form .form-actions{
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  align-items:flex-start;
  margin-top:0.25rem;
}

/* On wider screens place status next to button */
@media(min-width:640px){
  .contact-form .form-actions{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:1rem;
  }
}

/* Use existing .btn.primary style; ensure size looks correct in form */
.contact-form .btn.primary{
  padding:0.6rem 1rem;
  font-size:0.95rem;
  border-radius:10px;
  box-shadow: var(--shadow-xs);
}

/* Status message */
.form-status{
  font-size:0.95rem;
  color: var(--gr-blue);
  margin:0;
}

/* Error / success variations (you can toggle these classes in JS if desired) */
.form-status.error{ color:crimson; }
.form-status.success{ color:green; }

/* Small accessibility improvement: reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .contact-form input,
  .contact-form textarea,
  .icon-btn,
  .btn { transition: none !important; }
}

/* Ensure form fits well in the contact-grid from your layout */
.contact-grid .contact-form{
  margin: 0;
}

/* If you want the form to sit flush with the contact-info column on larger screens */
@media(min-width:720px){
  .contact-grid{ grid-template-columns: 2fr 1fr; gap:1.25rem; }
  .contact-form{ padding:1.25rem; }
}

/* Ensure header items are well aligned */
.header-inner{
  align-items:center;
  gap:0.75rem;
}

/* Base (mobile) sizes - keep reasonably large but not overwhelming */
.logo img{
  height:92px; /* retains the larger header logo on mobile/tablet */
  width:auto;
  display:block;
}

/* Styling for the company name next to the logo */
.company-name{
  font-weight:800;
  color:var(--gr-blue);
  font-size:1.05rem;
  line-height:1;
  letter-spacing:0.01em;
  margin-left:0.6rem;
  display:block;
}

/* Medium screens: make both larger and add visual emphasis */
@media (min-width:720px) {
  .logo img{
    height:140px; /* noticeably larger on tablets / small desktops */
  }
  .company-name{
    font-size:1.45rem;
    color:var(--gr-blue); /* subtle brand emphasis */
    letter-spacing:0.02em;
    margin-left:0.9rem;
  }
}

/* Large desktops: make the logo and name very prominent */
@media (min-width:1100px) {
  .logo img{
    height:180px; /* large header mark on wide screens */
  }
  .company-name{
    font-size:2rem;
    font-weight:900;
    color:var(--gr-blue);
    margin-left:1rem;
  }

  /* Give a little more breathing room in the header on wide screens */
  .header-inner{
    padding-top:0.35rem;
    padding-bottom:0.35rem;
  }
}

/* Ensure the header stays usable on very narrow screens */
@media (max-width:420px){
  .logo img{ height:72px; }
  .company-name{ font-size:0.95rem; }
}