/* =========================================================
   A Helping Hand — Design Tokens
   Palette pulled from the logo (rainbow script + cupped hands)
   and the existing price sheet (deep navy + dotted route lines).
   ========================================================= */
:root{
  --navy-900:#1E2C3D;
  --navy-800:#26374B;
  --navy-700:#33475C;
  --cream:   #FBF6EC;
  --sand:    #F2E8D7;
  --sand-line:#E4D5BC;
  --ink:     #2A2620;
  --ink-soft:#5B5648;

  --coral:#E8546B;
  --amber:#F3A53D;
  --leaf: #4FA37B;
  --sky:  #3E8FCB;
  --violet:#7A63D6;

  --rainbow: linear-gradient(90deg, var(--coral), var(--amber), var(--leaf), var(--sky), var(--violet));

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --shadow-soft: 0 12px 30px -14px rgba(30,44,61,0.28);
  --shadow-card: 0 6px 20px -10px rgba(30,44,61,0.22);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-hand: "Caveat", cursive;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy-900);
  line-height:1.12;
  margin:0 0 .5em;
  font-weight:600;
}
p{ margin:0 0 1em; }
.container{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-hand);
  font-size:1.35rem;
  color:var(--coral);
  margin-bottom:.25em;
}
.section{ padding:88px 0; }
.section--tight{ padding:56px 0; }
.section--sand{ background:var(--sand); }
.section--navy{ background:var(--navy-800); color:#EDE7DA; }
.section--navy h1,.section--navy h2,.section--navy h3{ color:#fff; }
.center{ text-align:center; }
.lede{
  font-size:1.15rem;
  color:var(--ink-soft);
  max-width:640px;
}
.center .lede{ margin-left:auto; margin-right:auto; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--sky);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-weight:600;
  font-size:1rem;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:var(--coral);
  color:#fff;
  box-shadow:0 10px 24px -10px rgba(232,84,107,0.6);
}
.btn-primary:hover{ background:#d8465d; }
.btn-ghost{
  background:transparent;
  border-color:currentColor;
  color:inherit;
}
.btn-ghost:hover{ background:rgba(255,255,255,0.08); }
.section:not(.section--navy) .btn-ghost{ border-color:var(--navy-800); }
.section:not(.section--navy) .btn-ghost:hover{ background:rgba(38,55,75,0.06); }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(251,246,236,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--sand-line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 24px;
  max-width:1120px;
  margin:0 auto;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.05rem;
  color:var(--navy-900);
}
.brand img{ height:52px; width:auto; }
.nav-links{
  display:flex;
  align-items:center;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
  font-weight:600;
  font-size:.95rem;
}
.nav-links a{
  position:relative;
  padding:6px 2px;
  color:var(--navy-800);
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:3px;
  border-radius:3px;
  background:var(--rainbow);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-links a[aria-current="page"]{ color:var(--coral); }
.nav-cta{ margin-left:6px; }
.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}
.nav-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:var(--navy-900);
  margin:5px 0;
  transition:transform .2s ease, opacity .2s ease;
}

@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--cream);
    border-bottom:1px solid var(--sand-line);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:8px 24px 18px;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding:12px 0; }
  .nav-cta{ margin:10px 0 0; }
}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1100px 500px at 15% -10%, rgba(122,99,214,.35), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(62,143,203,.30), transparent 55%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
  color:#fff;
  padding:76px 0 0;
  position:relative;
  overflow:hidden;
}
.hero-inner{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px 56px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:48px;
  align-items:center;
}
.hero h1{ color:#fff; font-size:clamp(2.3rem, 4vw, 3.4rem); margin-bottom:.35em; }
.hero .lede{ color:#D9D2C4; max-width:520px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.hero-figure{
  display:flex;
  justify-content:center;
}
.hero-figure img{
  width:100%;
  max-width:420px;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.35));
}
@media (max-width:860px){
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero .lede{ margin:0 auto; }
  .hero-actions{ justify-content:center; }
}

/* Route-dotted divider — signature motif (echoes the price-sheet wave & transportation service) */
.route-divider{
  width:100%;
  height:64px;
  display:block;
}
.route-divider path{
  fill:none;
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:1 14;
}
.route-divider.on-navy{ color:rgba(255,255,255,.55); }
.route-divider.on-cream{ color:var(--navy-700); opacity:.35; }

/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap:28px; }
.grid-1{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; }
}

.card{
  background:#fff;
  border-radius:var(--radius-md);
  padding:32px 28px;
  box-shadow:var(--shadow-card);
  border:1px solid var(--sand-line);
}
.card .icon{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  font-size:1.4rem;
  color:#fff;
}
.icon--coral{ background:var(--coral); }
.icon--amber{ background:var(--amber); }
.icon--leaf{ background:var(--leaf); }
.icon--sky{ background:var(--sky); }
.icon--violet{ background:var(--violet); }

.card .price-tag{
  display:inline-block;
  margin-top:10px;
  font-weight:700;
  color:var(--navy-800);
  font-family:var(--font-display);
}
.card a.card-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  font-weight:600;
  color:var(--coral);
}
.card a.card-link:hover{ text-decoration:underline; }

/* Steps (genuinely sequential — how it works) */
.steps{ counter-reset:step; }
.step{
  position:relative;
  padding-left:56px;
}
.step::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;
  left:0; top:0;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--rainbow);
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Pricing tables ---------- */
.price-block{
  background:#fff;
  border:1px solid var(--sand-line);
  border-radius:var(--radius-md);
  padding:32px;
  box-shadow:var(--shadow-card);
}
.price-block + .price-block{ margin-top:28px; }
.price-block h3{
  display:flex; align-items:center; gap:12px;
  font-size:1.5rem;
}
.price-block h3 .dot{ width:14px; height:14px; border-radius:50%; display:inline-block; }
.price-row{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding:12px 0;
  border-top:1px dashed var(--sand-line);
}
.price-row:first-of-type{ border-top:none; }
.price-row .label{ font-weight:600; color:var(--navy-800); }
.price-row .value{ text-align:right; color:var(--ink-soft); }
.tasks-note{
  margin-top:10px;
  font-size:.95rem;
  color:var(--ink-soft);
  background:var(--sand);
  border-radius:var(--radius-sm);
  padding:14px 16px;
}

/* ---------- Team ---------- */
.team-card{ text-align:center; }
.team-photo{
  width:120px; height:120px;
  border-radius:50%;
  margin:0 auto 16px;
  background:var(--sand);
  border:3px solid #fff;
  outline:3px solid var(--sand-line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-size:1.8rem;
  color:var(--navy-700);
  overflow:hidden;
}
.team-photo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center top;
}
.team-photo--lg{ width:180px; height:180px; }
.team-card--solo{ max-width:420px; margin:0 auto; padding:40px 36px; }

.team-bio{
  max-height:130px;
  overflow-y:auto;
  padding-right:6px;
  text-align:left;
  /* fade the bottom edge so a scrollable overflow feels intentional */
  mask-image:linear-gradient(180deg, #000 85%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, #000 85%, transparent 100%);
}
.team-bio::-webkit-scrollbar{ width:6px; }
.team-bio::-webkit-scrollbar-track{ background:transparent; }
.team-bio::-webkit-scrollbar-thumb{ background:var(--sand-line); border-radius:6px; }

.social-links{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:18px;
}
.social-links a{
  width:38px; height:38px;
  border-radius:50%;
  background:var(--navy-800);
  border:1px solid var(--navy-800);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.social-links a:hover{
  background:var(--coral);
  color:#fff;
  transform:translateY(-2px);
}
.social-links svg{ width:18px; height:18px; fill:currentColor; }
.team-card h3{ margin-bottom:2px; font-size:1.2rem; }
.team-role{
  color:var(--coral);
  font-weight:700;
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:10px;
}

/* ---------- Tiers (partners) ---------- */
.tier-card{ display:flex; flex-direction:column; }
.tier-card .tier-name{ font-family:var(--font-hand); font-size:1.6rem; color:var(--violet); }
.tier-card ul{ margin:16px 0; padding-left:20px; color:var(--ink-soft); }
.tier-card li{ margin-bottom:6px; }
.tier-card .btn{ margin-top:auto; align-self:flex-start; }

/* ---------- Contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:start;
}
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.info-list{ list-style:none; margin:0; padding:0; }
.info-list li{
  display:flex; gap:14px;
  padding:16px 0;
  border-top:1px dashed var(--sand-line);
}
.info-list li:first-child{ border-top:none; }
.info-list .info-icon{
  width:36px; height:36px; flex:0 0 36px;
  border-radius:10px;
  background:var(--sand);
  display:flex; align-items:center; justify-content:center;
}
.map-wrap{
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--sand-line);
  box-shadow:var(--shadow-card);
}
.map-wrap iframe{ width:100%; height:360px; border:0; display:block; }

form.contact-form{
  background:#fff;
  border:1px solid var(--sand-line);
  border-radius:var(--radius-md);
  padding:28px;
  box-shadow:var(--shadow-card);
  display:grid;
  gap:16px;
}
.contact-form label{ font-weight:600; font-size:.9rem; color:var(--navy-800); display:block; margin-bottom:6px; }
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  border:1px solid var(--sand-line);
  font-family:var(--font-body);
  font-size:1rem;
  background:var(--cream);
}
.contact-form textarea{ min-height:120px; resize:vertical; }
.form-note{ font-size:.85rem; color:var(--ink-soft); }

/* ---------- Locations (hidden page) ---------- */
.location-card{
  background:#fff;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--sand-line);
  box-shadow:var(--shadow-card);
}
.location-card .map-wrap{ border:0; border-radius:0; box-shadow:none; }
.location-card .body{ padding:24px; }
.location-card.is-placeholder{
  opacity:.55;
  border-style:dashed;
}
.badge{
  display:inline-block;
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:4px 10px;
  border-radius:999px;
  background:var(--leaf);
  color:#fff;
}
.badge--soon{ background:var(--sand-line); color:var(--ink-soft); }

/* ---------- Job Listings ---------- */
.job-list {
  display: flex;
  flex-direction: column;
  gap: 64px; /* generous spacing between cards */
}

.job-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 40px 32px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--sand-line);
}

.job-card h3 {
  margin-bottom: 14px; /* spacing between title and meta */
}

.job-card h3 a {
  color: var(--navy-900);
  text-decoration: none;
}

.job-card h3 a:hover {
  text-decoration: underline;
}

.job-meta {
  font-size: .9rem;
  color: var(--ink-soft);
  margin-bottom: 20px; /* more breathing room before summary */
}

.job-summary {
  margin-top: 8px;
  margin-bottom: 42px; /* FIX: pushes button down so it never touches */
  color: var(--ink);
  line-height: 1.6;
}

.job-card .btn {
  margin-top: 10px; /* ensures consistent spacing above button */
}

/* ---------- Tiers (partners) ---------- */
.tier-card{ 
  display:flex; 
  flex-direction:column; 
}
.tier-card .tier-name{ 
  font-family:var(--font-hand); 
  font-size:1.6rem; 
  color:var(--violet); 
}
.tier-card ul{ 
  margin:16px 0; 
  padding-left:20px; 
  color:var(--ink-soft); 
}
.tier-card li{ 
  margin-bottom:6px; 
}
.tier-card .btn{ 
  margin-top:auto; 
  align-self:flex-start; 
}


/* ---------- CTA band ---------- */
.cta-band{
  background:var(--navy-900);
  color:#fff;
  border-radius:var(--radius-lg);
  padding:56px;
  text-align:center;
  background-image:radial-gradient(700px 260px at 50% -20%, rgba(243,165,61,.25), transparent 60%);
}
.cta-band h2{ color:#fff; }
.cta-band .lede{ color:#D9D2C4; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-900);
  color: #C9C2B2;
  padding: 56px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr; /* Updated for 4 columns */
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr; /* 2x2 grid on tablets/smaller screens */
  }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr; /* Single column on mobile */
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.footer-brand img {
  height: 40px;
}

.footer-brand span {
  font-family: var(--font-display);
  color: #fff;
  font-weight: 600;
}

.footer-contact-info p {
  font-size: 0.9rem;
  line-height: 1.5;
}

.site-footer h4 {
  color: #fff;
  font-family: var(--font-body);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin-bottom: 10px;
}

.site-footer a {
  color: #C9C2B2;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
}

.footer-bottom {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .85rem;
}

/* ---------- Footer Bottom Bar ---------- */
.footer-bottom {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-size: .85rem;
}

/* Place the logo rule here */
.footer-brand-logo img {
  height: 32px !important;
  max-height: 32px !important;
  width: auto !important;
  display: block;
}

.footer-info p {
  margin: 3px 0;
}

/* Page hero for interior pages */
.page-hero{
  background:linear-gradient(180deg, var(--navy-900), var(--navy-800));
  color:#fff;
  padding:64px 0 40px;
}
.page-hero h1{ color:#fff; margin-bottom:.2em; }
.page-hero .lede{ color:#D9D2C4; }

.edit-note{
  font-size:.8rem;
  color:var(--ink-soft);
  background:var(--sand);
  border:1px dashed var(--sand-line);
  border-radius:var(--radius-sm);
  padding:10px 14px;
  margin-bottom:24px;
}