/* Shared styles for all static pages. Edit this file to change the site-wide design. */
/* Base box sizing and typography. */
* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:#f5f9fa;
  color:#073d60;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:16px
}

a {
  color:inherit
}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid #d7ad67;
  outline-offset:3px
}

/* Shared navigation and branding. */
.site-header {
  background:#073d60;
  color:white
}

.nav-wrap {
  max-width:1200px;
  margin:auto;
  padding:21px 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px
}

.brand {
  font:1.2rem/1.25 Georgia,serif;
  text-decoration:none
}

.brand small {
  display:block;
  color:#dfb778;
  font-size:.7rem;
  letter-spacing:.18em;
  margin-top:5px
}

.nav-links {
  display:flex;
  gap:25px;
  align-items:center;
  flex-wrap:wrap
}

.nav-links a {
  text-decoration:none;
  font-size:.92rem
}

.nav-links a:hover,.nav-links a[aria-current="page"] {
  text-decoration:underline;
  text-underline-offset:6px
}

.nav-links .nav-contact {
  border:1px solid #d7ad67;
  color:#f2d5a3;
  padding:10px 16px
}

/* Shared footer. */
.site-footer {
  background:#062f4c;
  color:#c1d3dc
}

.footer-inner {
  max-width:1200px;
  padding:28px 30px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:.85rem
}

.site-footer a {
  color:#e5c18a
}

.site-footer a:hover {
  text-decoration:none
}

.container {
  max-width:1200px;
  margin:auto;
  padding:0 30px
}

.eyebrow {
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.17em;
  font-weight:700;
  color:#b98b49
}

.display {
  font:400 clamp(2.8rem,6vw,5.2rem)/1.08 Georgia,serif;
  letter-spacing:-.035em
}

.section-title {
  font:400 clamp(2.15rem,4vw,3.55rem)/1.15 Georgia,serif;
  letter-spacing:-.025em
}

.lead {
  font-size:1.12rem;
  line-height:1.75;
  max-width:740px;
  color:#435564
}

.button-link,.button-submit {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:15px 23px;
  background:#d7ad67;
  color:#073d60;
  font-weight:700;
  text-decoration:none;
  border:1px solid #d7ad67;
  cursor:pointer
}

.button-link:hover,.button-submit:hover {
  background:#eac68a
}

.button-link.light {
  background:transparent;
  color:#fff;
  border-color:#d7ad67
}

.button-link.light:hover {
  background:#184d67
}

/* Hero sections. */
.page-hero {
  background:#073d60;
  color:#fff
}

.page-hero .container {
  padding-top:85px;
  padding-bottom:88px
}

.page-hero .lead {
  color:#d6e5e9
}

.page-hero h1 {
  max-width:930px;
  margin:19px 0 25px
}

.section {
  padding:90px 0
}

.section.soft {
  background:#e9f3f3
}

.section.white {
  background:#fff
}

.section h2 {
  margin:12px 0 22px
}

.divider {
  border-top:1px solid #b6cbd0
}

/* Service and pricing card layouts. */
.service-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:45px
}

.service-card {
  background:white;
  border-top:3px solid #308b8f;
  padding:32px 28px;
  min-height:290px
}

.service-card .number {
  font:1.15rem Georgia,serif;
  color:#277f84
}

.service-card h2,.service-card h3 {
  font:400 1.7rem/1.2 Georgia,serif;
  margin:24px 0 14px
}

.service-card p,.service-card li {
  color:#435564;
  line-height:1.7
}

.service-card ul {
  padding-left:20px
}

.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px;
  align-items:start
}

.steps {
  counter-reset:steps;
  display:grid;
  gap:25px
}

.step {
  border-top:1px solid #a9bfc5;
  padding-top:22px
}

.step h3 {
  font:400 1.4rem Georgia,serif;
  margin:0 0 10px
}

.step p {
  color:#435564;
  line-height:1.7;
  margin:0
}

.next-band {
  background:#073d60;
  color:#fff;
  padding:67px 0
}

.next-band .container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}

.next-band h2 {
  font:400 clamp(2rem,4vw,3.2rem)/1.2 Georgia,serif;
  margin:12px 0
}

.next-band p {
  color:#d6e5e9;
  line-height:1.65;
  margin:0
}

.home-hero .container {
  min-height:560px;
  padding-top:76px;
  padding-bottom:80px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:60px;
  align-items:center
}

.home-hero h1 {
  margin:20px 0 26px
}

.home-hero .lead {
  color:#d6e5e9
}

.logo-panel {
  max-width:460px;
  margin:auto;
  padding:18px;
  background:#fff;
  border:1px solid #e0e9ea;
  border-radius:8px;
  box-shadow:0 26px 60px rgba(0,20,34,.24)
}

.logo-panel img {
  display:block;
  width:100%;
  height:auto
}

.founder-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:45px
}

.founder {
  border-top:2px solid #308b8f;
  padding:24px 0
}

.founder h2,.founder h3 {
  font:400 1.85rem Georgia,serif;
  margin:0 0 8px
}

.role {
  color:#277f84;
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}

.founder p {
  color:#435564;
  line-height:1.72
}

/* Contact form and inquiry layout. */
.contact-layout {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:70px;
  padding:82px 0 105px
}

.contact-card {
  background:#fff;
  border-top:3px solid #308b8f;
  padding:35px;
  box-shadow:0 15px 36px rgba(7,61,96,.06)
}

.contact-card h2 {
  font:400 2rem Georgia,serif;
  margin:0 0 12px
}

.contact-card p {
  color:#435564;
  line-height:1.65
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}

.field {
  display:grid;
  gap:8px;
  margin-bottom:21px
}

.field label {
  font-weight:650;
  font-size:.92rem
}

.field input,.field textarea,.field select {
  width:100%;
  border:1px solid #9fb7c0;
  border-radius:3px;
  background:#fff;
  color:#073d60;
  padding:12px 14px;
  font:inherit
}

.field textarea {
  min-height:150px;
  resize:vertical
}

.field select {
  appearance:auto
}

.form-note {
  font-size:.9rem;
  line-height:1.6;
  color:#526371
}

.message {
  padding:14px 17px;
  margin:18px 0;
  border:1px solid #98c4c4;
  background:#e9f3f3;
  color:#073d60
}

.message.error {
  border-color:#d1aaa6;
  background:#fff1ef;
  color:#8e2520
}

.legal {
  max-width:850px;
  padding-top:75px;
  padding-bottom:110px;
  min-height:65vh
}

.legal h1 {
  font:400 clamp(2.7rem,5vw,4rem) Georgia,serif
}

.legal h2 {
  font:400 1.6rem Georgia,serif;
  margin-top:36px
}

.legal h3 {
  font-size:1.1rem;
  margin-top:30px
}

.legal p {
  line-height:1.75;
  color:#435564
}

.legal a {
  color:#075b79;
  text-decoration:underline
}

.back {
  display:inline-block;
  margin-bottom:27px;
  color:#075b79
}

.inbox {
  padding:60px 0 100px
}

.inquiry {
  border:1px solid #b6cbd0;
  background:white;
  padding:24px;
  margin:15px 0
}

.inquiry p {
  white-space:pre-wrap;
  overflow-wrap:anywhere
}

.muted {
  color:#526371
}

/* Tablet/mobile layout overrides. */
@media(max-width:800px) {
  .nav-wrap {
    align-items:flex-start;
    flex-direction:column
  }
  .nav-links {
    gap:13px 20px
  }
  .home-hero .container,.split,.contact-layout {
    grid-template-columns:1fr
  }
  .home-hero .container {
    gap:44px
  }
  .logo-panel {
    max-width:360px
  }
  .service-list,.founder-grid {
    grid-template-columns:1fr
  }
  .service-card {
    min-height:0
  }
  .next-band .container {
    display:block
  }
  .next-band .button-link {
    margin-top:28px
  }
  .contact-layout {
    gap:30px
  }
  .footer-inner {
    flex-direction:column
  }
  .section {
    padding:70px 0
  }
}

/* Small-phone layout overrides. */
@media(max-width:520px) {
  .container {
    padding-left:22px;
    padding-right:22px
  }
  .page-hero .container {
    padding-top:65px;
    padding-bottom:68px
  }
  .home-hero .container {
    padding-top:65px;
    padding-bottom:67px
  }
  .form-grid {
    grid-template-columns:1fr;
    gap:0
  }
  .contact-card {
    padding:24px
  }
}

/* Bookkeeping audience cards and native FAQ styling. */
.audience-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:40px
}

.bookkeeping-faq {
  max-width:850px
}

.bookkeeping-faq details {
  border-top:1px solid #a9bfc5;
  padding:22px 0
}

.bookkeeping-faq summary {
  cursor:pointer;
  font-size:1.15rem;
  font-weight:650
}

.bookkeeping-faq p {
  color:#435564;
  line-height:1.75
}

.bookkeeping-faq a {
  text-decoration:underline
}

@media(max-width:800px) {
  .audience-grid {
    grid-template-columns:1fr
  }
}