/* Homepage-only layouts. Colors, type, buttons, header and footer come from site.css. */

/* Hero */
.modern-hero {
  padding:72px 0 0;
  background:linear-gradient(#fff calc(100% - 160px),var(--tint) 0);
}
.hero-intro {
  text-align:center;
  margin:auto;
}
.hero-eyebrow {
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.modern-home .hero-eyebrow {
  color:var(--blue);
}
.modern-home h1 {
  font-size:clamp(3.2rem,6.2vw,6rem);
  margin:18px auto 22px;
}
.modern-home h1 span {
  display:block;
  color:var(--blue);
}
.hero-description {
  max-width:40rem;
  margin:auto;
  font-size:1.18rem;
  line-height:1.6;
}
.hero-intro .actions {
  justify-content:center;
  margin-top:30px;
}
.trial-note {
  margin:16px auto 0;
  font-size:.86rem;
}
.follow-through {
  margin:56px 0 0;
  padding:30px 40px 40px;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:16px 16px 0 0;
  background:#fff;
  box-shadow:0 -20px 40px -30px #0b2a4a40;
}
.follow-through figcaption {
  text-align:center;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.workflow-track {
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1.35fr 1fr;
  gap:48px;
  margin:28px 0 0;
  padding:0;
  text-align:center;
}
.workflow-track>li {
  min-width:0;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.workflow-track>li:not(:last-child)::after {
  content:'→' / '';
  position:absolute;
  top:58px;
  right:-38px;
  color:var(--gold-dark);
  font-size:1.8rem;
  font-weight:700;
}
.modern-home .workflow-track h2 {
  font-family:'Public Sans',Arial,sans-serif;
  text-transform:none;
  font-size:1.12rem;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.3;
  margin-top:18px;
}
.workflow-track>li>p {
  max-width:30ch;
  margin-top:6px;
  font-size:.92rem;
  line-height:1.5;
}
.job-illustration,.feedback-illustration {
  display:grid;
  place-items:center;
  width:128px;
  height:128px;
  border-radius:50%;
  background:var(--gold-tint);
}
.job-illustration svg,.feedback-illustration svg {
  width:68px;
  height:68px;
  stroke:var(--ink);
  stroke-width:3;
}
.job-illustration svg rect {
  fill:#fff;
}
.job-illustration svg circle {
  fill:var(--gold);
}
.message-illustration {
  width:100%;
  text-align:left;
  background:var(--tint);
  border:1px solid var(--line);
  border-radius:14px 14px 14px 2px;
  padding:18px 20px;
}
.message-label {
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.74rem;
  font-weight:600;
  color:var(--muted);
}
.message-label svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}
.modern-home .message-illustration p {
  font-size:1rem;
  line-height:1.5;
  margin-top:8px;
  color:var(--ink);
}
.sample-link {
  display:inline-block;
  margin-top:12px;
  padding:.4rem .8rem;
  border-radius:4px;
  background:var(--blue);
  color:#fff;
  font-size:.8rem;
  font-weight:700;
}

/* Section heads */
.modern-section-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:40px;
}
.modern-section-head h2 {
  max-width:20ch;
}
.modern-section-head p {
  max-width:34ch;
  font-size:1.05rem;
}

/* Services */
.modern-services {
  padding:96px 0;
  background:var(--tint);
}
.modern-offers {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:stretch;
}
.modern-offers article {
  display:flex;
  flex-direction:column;
  align-items:start;
  padding:36px 32px;
  border-radius:var(--radius);
  background:#fff;
  border:1px solid var(--line);
}
.modern-offers .review-offer {
  border-top:6px solid var(--gold);
  box-shadow:var(--shadow);
}
.offer-tag {
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--blue);
}
.review-offer .offer-tag {
  background:var(--gold-tint);
  color:var(--ink);
  padding:.3rem .65rem;
  border-radius:4px;
}
.modern-offers h3 {
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(2rem,2.8vw,2.6rem);
  line-height:.95;
  margin-top:18px;
}
.modern-offers article>p:not(.service-boundary):not(.offer-price) {
  font-size:1.02rem;
  line-height:1.65;
  margin-top:16px;
  max-width:46ch;
}
.modern-benefits {
  list-style:none;
  padding:0;
  margin:24px 0 30px;
  display:grid;
  gap:10px;
  font-size:.94rem;
  font-weight:600;
  color:var(--ink);
}
.modern-benefits li::before {
  content:'✓' / '';
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  margin-right:.6rem;
  border-radius:50%;
  background:var(--gold);
  color:var(--ink);
  font-size:.75rem;
  font-weight:800;
}
.modern-offers .button {
  margin-top:auto;
}
.modern-offers .text-link {
  margin-top:10px;
}
.modern-offers .service-boundary {
  font-size:.84rem;
  line-height:1.6;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
}

/* Process: the one navy band on the page */
.modern-process {
  padding:96px 0;
  background:var(--ink);
}
.modern-process h2,.modern-process h3 {
  color:#fff;
}
.modern-process p {
  color:#c9d5e3;
}
.process-cards {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.process-cards li {
  padding:32px;
  border-radius:12px;
  background:#ffffff0d;
  border:1px solid #ffffff1f;
}
.process-number {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--gold);
  color:var(--ink);
  font-family:var(--display);
  font-size:1.6rem;
  font-weight:800;
}
.process-cards h3 {
  font-size:1.3rem;
  margin-top:20px;
}
.process-cards p {
  margin-top:8px;
  font-size:.98rem;
  line-height:1.6;
}

/* Why Maple Bay + founder */
.modern-why {
  padding:96px 0 40px;
}
.why-layout {
  display:grid;
  grid-template-columns:minmax(260px,.8fr) 2fr;
  gap:64px;
  align-items:start;
}
.founder {
  margin:0;
}
.founder img {
  width:100%;
  height:auto;
  border-radius:var(--radius);
  border-bottom:6px solid var(--gold);
}
.founder figcaption {
  margin-top:14px;
  display:flex;
  flex-direction:column;
  font-size:.92rem;
  color:var(--muted);
}
.founder figcaption strong {
  font-size:1.1rem;
  color:var(--ink);
}
.modern-home .founder-intro {
  margin:18px 0 36px;
  font-size:1.18rem;
  line-height:1.6;
  max-width:46ch;
  color:var(--ink);
}
.why-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.why-grid>div {
  border-top:4px solid var(--gold);
  padding-top:22px;
}
.why-grid h3 {
  font-size:1.3rem;
}
.why-grid p {
  margin-top:8px;
  font-size:1rem;
  line-height:1.6;
}
.phone-link {
  display:inline-block;
  margin-top:32px;
  font-size:1.15rem;
  font-weight:700;
  color:var(--blue);
}

/* Closing call to action: matches .closing on service pages */
.modern-contact {
  padding:56px 0 96px;
}
.contact-panel {
  text-align:center;
  background:var(--gold-tint);
  border:1px solid #f3dea6;
  border-radius:18px;
  padding:72px 6%;
}
.modern-contact h2 {
  max-width:16ch;
  margin:0 auto;
}
.modern-contact p {
  margin:18px auto 0;
  font-size:1.12rem;
  max-width:44ch;
}
.modern-contact .actions {
  justify-content:center;
  margin-top:30px;
}

@media(max-width:1100px) {
  .modern-offers {
    grid-template-columns:1fr 1fr;
  }
  .modern-offers .review-offer {
    grid-column:1/-1;
  }
}
@media(max-width:1000px) {
  .workflow-track {
    gap:36px;
  }
  .workflow-track>li:not(:last-child)::after {
    right:-30px;
  }
  .modern-offers article {
    padding:32px;
  }
}
@media(max-width:900px) {
  .modern-offers,.process-cards,.why-grid,.why-layout {
    grid-template-columns:1fr;
  }
  .process-cards li {
    display:grid;
    grid-template-columns:48px 1fr;
    column-gap:20px;
    padding:24px;
  }
  .process-cards h3 {
    margin-top:10px;
  }
  .process-cards p {
    grid-column:2;
  }
  .modern-section-head {
    flex-direction:column;
    align-items:start;
    gap:14px;
  }
  .why-layout {
    gap:32px;
  }
  .founder {
    max-width:320px;
  }
}
@media(max-width:720px) {
  .modern-hero {
    padding-top:40px;
    background:linear-gradient(#fff calc(100% - 120px),var(--tint) 0);
  }
  .modern-home h1 {
    font-size:clamp(2.9rem,13vw,4.4rem);
  }
  .hero-description {
    font-size:1.04rem;
  }
  .hero-intro .button {
    width:100%;
  }
  .follow-through {
    margin-top:40px;
    padding:24px 20px 28px;
  }
  .workflow-track {
    grid-template-columns:1fr;
    gap:28px;
  }
  .workflow-track>li:not(:last-child)::after {
    content:'↓' / '';
    position:static;
    margin-top:14px;
    font-size:1.4rem;
  }
  .job-illustration,.feedback-illustration {
    width:92px;
    height:92px;
  }
  .job-illustration svg,.feedback-illustration svg {
    width:50px;
    height:50px;
  }
  .modern-services,.modern-process {
    padding:60px 0;
  }
  .modern-why {
    padding:60px 0 24px;
  }
  .modern-offers article {
    padding:26px 22px;
  }
  .modern-offers .button,.modern-contact .button {
    width:100%;
  }
  .contact-panel {
    padding:44px 22px;
  }
  .modern-contact {
    padding:32px 0 60px;
  }
}
.modern-offers .offer-price {
  margin-top:12px;
  font-size:.92rem;
  color:var(--body);
}
.offer-price strong {
  color:var(--ink);
  font-size:1.05rem;
}