/* ---- Reset (light) ---- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer,
header, hgroup, menu, nav, output, ruby, section,
summary, time, mark, audio, video {
  margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
table { border-collapse: collapse; border-spacing: 0; }
ol, ul { list-style: none; }

/* ---- Base ---- */
:root {
  --ink: #111;
  --muted: #666;
  --brand: rgb(90,16,162);
  --brand-soft: rgb(195,190,239);
  --rule: gainsboro;
  --link: firebrick;
  --max: 1120px;     /* page max width */
  --gutter: 36px;    /* desktop gutter between columns */
}

html, body {
  height: 100%;
}

body {
  background:#fff;
  color: var(--ink);
  font-family: 'Avenir Next', 'Avenir', 'Helvetica', 'Arial', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  padding-inline: 10px; /* small page edge padding */
}

/* Typography */
h1 { font-weight: 800; font-size: 36px; line-height: 44px; margin-bottom: 10px; }
#big { color: midnightblue; } /* your headline color */

p + p { margin-top: 12px; }

b, strong { font-weight: 700; }

a { font-weight: 700; text-decoration: none; color: var(--link); }
a:hover { text-decoration: underline; }
a:visited { color: var(--link); }
a:active { color: blue; }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 18px 0; }

.note {
  background: gainsboro;
  padding: 12px;
  font-size: 14px;
  line-height: 18px;
  border-radius: 2px;
}

/* ---- Header nav (kept from your site) ---- */
#header {
  margin: 30px auto;
  padding-bottom: 10px;
  color: #999;
  font-size: 14px;
  text-align: center;
  border-bottom: 1px solid gainsboro;
  width: 750px;
}
#header a, #header a:link, #header a:visited, #header a:active {
  color: #333; font-weight: normal; display: inline-block;
}
#header a { border-right: 1px solid #ccc; padding: 0 20px; }
#header a:last-child { border-right: none; }

/* Base container: no grid by default, so single-column pages (Contact, etc.) stay normal */
#mainDiv{
  max-width: var(--max);
  margin: 0 auto;
}

/* Use the two-column grid ONLY on pages that include the hero image column */
#mainDiv:has(#rightDiv){
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px; /* text / image */
  gap: var(--gutter);
  align-items: start;
  padding-inline: 10px; /* keep the small side padding only for the grid layout */
}

/* Responsive collapse for the two-column layout only */
@media (max-width: 980px){
  #mainDiv:has(#rightDiv){
	grid-template-columns: 1fr;
	gap: 24px;
  }
}

/* Keep these from before */
#leftDiv, #rightDiv { width: auto; float: none; }
#rightDiv img { display:block; max-width:100%; height:auto; margin:0 auto; }

/* Columns */
#leftDiv { padding-right: 0; }
#rightDiv { text-align: center; }

/* Images responsive */
#rightDiv img { display:block; max-width:100%; height:auto; margin:0 auto; }
#rightDiv .brandmark { margin-bottom: 16px; }
#rightDiv .portrait { border-radius: 2px; }

/* CTA spans both columns */
#ctaRow{
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding-block: 24px;
}

#contactButton{
  display: inline-block;
  border-radius: 25px;
  border: 1px solid gainsboro;
  background-color: var(--brand);
  color: #fff !important;
  text-align: center;
  padding: 12px 22px;
  font-size: 16px;
}
#contactButton:hover{
  background-color: var(--brand-soft);
  border-color: #999;
  color: #000 !important;
}

/* Footer */
#footer{
  margin: 10px auto 30px;
  padding: 20px 0;
  width: 90%;
  text-align: center;
  color: #999;
  font-size: 12px;
}

/* ---- Responsive ---- */
@media (max-width: 980px){
  #mainDiv{
	grid-template-columns: 1fr;  /* stack */
	gap: 24px;
  }
  /* Optional: brand+photo first on small screens */
  /* #rightDiv { order: -1; } */
  h1{ font-size: 30px; line-height: 38px; }
}

/* Remove any legacy floats/widths just in case */
#leftDiv, #rightDiv { width:auto; float:none; }

/* Nice text selection */
::selection{ background: #dbe; }

input, select { padding: 20px; width: 300px; font-size: 16px; }
input[type=submit] { padding: 20px; font-size: 20px; }

textarea { padding: 20px; width: 300px; height: 80px; font-size: 16px; }

h2 { font-size: 200%; font-weight: bold; color: rgb(113, 19, 169); margin-bottom: 10px; }

/* ---- Carousel ---- */
.carousel{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3; /* keep photos consistent; adjust to 16/9 if your images are wide */
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  background: #f7f7fb;
}

.carousel .slides{
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel .slides img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .5s ease, transform .6s ease;
}

.carousel .slides img.is-active{
  opacity: 1;
  transform: scale(1);
}

/* nav arrows */
.carousel .nav{
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  border: none;
  background: rgba(255,255,255,.85);
  width: 40px; height: 40px;
  border-radius: 999px;
  font-size: 24px; line-height: 40px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.carousel .nav:hover{ background: #fff; }
.carousel .nav.prev{ left: 10px; }
.carousel .nav.next{ right: 10px; }

/* dots/pagination */
.carousel .dots{
  position: absolute;
  left: 50%;
  bottom: 10px;
  translate: -50% 0;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.carousel .dots button{
  width: 9px; height: 9px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.7);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  cursor: pointer;
}
.carousel .dots button[aria-current="true"]{
  background: var(--brand);
}

/* caption from the current image alt */
.carousel .cap{
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 6px;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.25), transparent);
  color: #fff;
  font-size: 13px;
}

/* mobile tweaks */
@media (max-width: 980px){
  .carousel{ aspect-ratio: 16 / 10; }
  .carousel .nav{ width: 36px; height: 36px; font-size: 20px; }
}

/* Page-level hero refinements */
.page-kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

#big {
  font-weight: 800;
  font-size: 32px;
  line-height: 1.3;
  color: midnightblue;
  margin-bottom: 14px;
}

.lede {
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 14px;
  color: #222;
}

.bullet-list {
  list-style: disc;
  margin: 12px 0 16px 1.4rem;
}
.bullet-list li {
  margin-bottom: 6px;
}

/* Right column: logo + testimonial */
#rightDiv {
  text-align: left;
}

.brandmark {
  max-width: 260px;
  margin: 4px 0 20px;
}

.testimonial-card {
  background: #f7f7fb;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--rule);
  font-size: 14px;
  color: var(--muted);
}

.testimonial-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 10px;
}

.testimonial-text {
  font-style: italic;
  margin-bottom: 4px;
  color: #333;
}

.testimonial-meta {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* CTA alignment */
.cta-inline {
  margin-top: 20px;
}

/* Slightly larger CTA for this page */
#contactButton {
  display: inline-block;
  border-radius: 999px;
  border: 1px solid gainsboro;
  background-color: var(--brand);
  color: #fff !important;
  text-align: center;
  padding: 12px 28px;
  font-size: 16px;
}
#contactButton:hover {
  background-color: var(--brand-soft);
  border-color: #999;
  color: #000 !important;
}