/* Pure Joy Photo
   Breakpoints mirror the original site:
     >= 768px  two-column "computer" layout
     <= 767px  stacked "phone" layout (carousel hero, no collage)
     <= 480px  smaller phone typography                                    */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face { font-family: "Alatsi"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/alatsi-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/lato-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/lato-700.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url("../fonts/open-sans-variable.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --brown: #642e14;
  --navy: #121229;
  --beige: #e1d7d4;
  --ink: #111827;
  --page: 1170px;

  --font-head: "Alatsi", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-faq: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --text: 20px;        /* body copy */
  --btn-text: 18px;    /* outlined buttons */
  --faq-q: 20px;
  --faq-a: 20px;
  --email: 20px;       /* "Get In Touch" email */
}

@media (max-width: 480px) {
  :root {
    --text: 18px;
    --btn-text: 15px;
    --faq-q: 15px;
    --faq-a: 12px;
    --email: 18px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: var(--font-body);
  font-size: 16px;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }

/* Content photos carry an explicit aspect-ratio so the layout is identical
   whichever srcset candidate the browser picks, and never shifts on load. */
.about__collage,
.focus img,
.testimonial__media img,
.contact__map img { object-fit: cover; }

/* Alatsi only ships a regular weight; the bold look is the browser's
   synthesised bold, exactly as on the original site. */
.heading {
  margin: 0;
  color: var(--brown);
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
}
.heading--navy { color: var(--navy); }
.heading--center { text-align: center; }

.prose {
  margin: 13px 0 0;
  font-size: var(--text);
  font-weight: 400;
  line-height: 1.8em;
}
.prose p { margin: 0; }
/* Paragraphs are separated by exactly one blank line of text. */
.prose p + p::before { content: "\A"; white-space: pre; }
.prose--navy { color: var(--navy); }

/* ---------- Buttons ---------- */
.btn-row { display: flex; justify-content: center; }

.btn {
  display: block;
  padding: 10px 35px;
  border: 2px solid var(--navy);
  color: var(--brown);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  text-align: center;
  text-decoration: none;
}
.btn span { display: inline-block; font-size: var(--btn-text); }
.btn--light { border-color: #fff; color: #fff; }

/* ---------- Header ---------- */
.site-header { background: var(--brown); padding: 15px 20px; }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: calc(var(--page) - 40px);
  margin: 0 auto;
}

.site-header__logo { display: block; flex: none; width: 200px; height: auto; margin-right: 68px; }

.site-nav ul { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }

.site-nav a {
  display: block;
  padding: 5px 30px;
  color: #fff;
  font-family: var(--font-head);
  font-size: 18px;
  line-height: 20.8px;
  text-decoration: none;
}

/* ---------- Hero (computer) ---------- */
.hero { position: relative; padding-bottom: 700px; }

.hero__bg {
  position: absolute;
  inset: 0;
  background: url("../img/hero-1600.webp") center / cover;
  opacity: 0.8;
}
@media (min-width: 1601px), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  .hero__bg { background-image: url("../img/hero-2400.webp"); }
}

.hero__box {
  position: relative;
  z-index: 2;
  max-width: var(--page);
  margin: 0 auto;
  padding: 25px 15px;
  border-bottom: 5px solid var(--brown);
  background: rgba(0, 0, 0, 0.5);
}

.hero__title {
  margin: 0;
  color: #fff;
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
.hero .btn-row { margin-top: 23px; }

/* ---------- Hero (phone): carousel ---------- */
.carousel-section { display: none; }

.carousel { position: relative; height: 500px; overflow: hidden; }

.carousel__track {
  display: flex;
  height: 100%;
  touch-action: pan-y;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
.carousel__track.is-jumping { transition: none; }

.carousel__slide { flex: 0 0 100%; height: 100%; overflow: hidden; }
.carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 12;
  width: 40px;
  height: 40px;
  margin: -20px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }
.carousel__arrow svg { display: block; width: 40px; height: 40px; }

.carousel__dots {
  position: absolute;
  bottom: 20px;
  left: 0;
  z-index: 10;
  display: flex;
  gap: 8px;
  justify-content: center;
  width: 100%;
}
.carousel__dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #000;
  cursor: pointer;
  transition: background-color 0.3s;
  -webkit-tap-highlight-color: transparent;
}
/* Larger invisible tap target */
.carousel__dot::after { content: ""; position: absolute; inset: -14px -4px; }
.carousel__dot.is-active { background: #fff; }

/* ---------- About ---------- */
.about { background: var(--beige); padding: 173px 0 50px; }

.about__grid { display: flex; max-width: var(--page); margin: 0 auto; padding-bottom: 15px; }

.about__main,
.about__side { display: flex; flex-direction: column; width: 50%; min-width: 0; padding: 0 20px 10px; }

.about__side { order: -1; justify-content: center; padding-top: 7px; }

.about__collage { display: block; width: 100%; height: auto; margin-bottom: 10px; }

.btn-row--intro { margin: 80px 0; }

.focus { margin-top: 80px; padding-top: 10px; }
.heading + .focus { margin-top: 50px; }
.focus img { display: block; width: 100%; height: auto; border-radius: 5px; }
.focus .heading { margin-top: 20px; }

.pricing .heading { margin-top: 10px; }
.pricing__note::after { content: "\A\200B"; white-space: pre; }

.bullets { margin: 0; padding: 20px 20px 20px 50px; list-style: none; }
.bullets li { position: relative; padding-left: 10px; font-size: 20px; line-height: 28px; }
/* Font Awesome Free 5.15.4 "bacon" - https://fontawesome.com/license/free (CC BY 4.0) */
.bullets li::before {
  content: "";
  position: absolute;
  top: 4.24px;
  right: 100%;
  width: 22.5px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M218.92 336.39c34.89-34.89 44.2-59.7 54.05-86 10.61-28.29 21.59-57.54 61.37-97.34s69.05-50.77 97.35-61.38c23.88-9 46.64-17.68 76.79-45.37L470.81 8.91a31 31 0 0 0-40.18-2.83c-13.64 10.1-25.15 14.39-41 20.3C247 79.52 209.26 191.29 200.65 214.1c-29.75 78.83-89.55 94.68-98.72 98.09-24.86 9.26-54.73 20.38-91.07 50.36C-3 374-3.63 395 9.07 407.61l35.76 35.51C80 410.52 107 400.15 133 390.39c26.27-9.84 51.06-19.12 85.92-54zm348-232l-35.75-35.51c-35.19 32.63-62.18 43-88.25 52.79-26.26 9.85-51.06 19.16-85.95 54s-44.19 59.69-54 86C292.33 290 281.34 319.22 241.55 359s-69 50.73-97.3 61.32c-23.86 9-46.61 17.66-76.72 45.33l37.68 37.43a31 31 0 0 0 40.18 2.82c13.6-10.06 25.09-14.34 40.94-20.24 142.2-53 180-164.1 188.94-187.69C405 219.18 464.8 203.3 474 199.86c24.87-9.27 54.74-20.4 91.11-50.41 13.89-11.4 14.52-32.45 1.82-45.05z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Call to action + FAQ ---------- */
.faq-section { padding: 100px 0; }

.btn-row--cta { padding: 25px 20px 105px; }

.faq-card {
  width: 80%;
  max-width: calc(var(--page) * 0.8);
  margin: 0 auto;
  padding: 40px 50px;
  border: 2px solid transparent;
  border-radius: 20px;
  background: var(--beige);
}
.faq-card > .heading { margin-bottom: 18px; }

.faq { padding: 10px; }
.faq__item { margin-bottom: 10px; }
.faq__heading { margin: 0; font: inherit; }

.faq__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 15px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-faq);
  font-size: var(--faq-q);
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-radius 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.faq__icon { flex: none; width: 14px; height: 16px; fill: currentColor; transition: transform 0.2s ease; }

.faq__panel {
  display: grid;
  grid-template-rows: 1fr;
  border-radius: 0 0 10px 10px;
  background: #fff;
}
.faq__panel-inner { min-height: 0; overflow: hidden; }
.faq__panel p {
  margin: 0;
  padding: 15px;
  color: #000;
  font-size: var(--faq-a);
  line-height: 1.5;
}

/* Collapsing only applies once JavaScript is running, so answers stay
   readable without it. */
.js .faq__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.25s ease, visibility 0s linear 0.25s;
}
.js .faq__item.is-open .faq__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.25s ease, visibility 0s;
}
.faq__item.is-open .faq__button { border-radius: 10px 10px 0 0; background: transparent; color: var(--brown); }
.faq__item.is-open .faq__icon { transform: rotate(180deg); }

/* ---------- Testimonial ---------- */
.testimonial { background: var(--beige); padding: 23px 0 33px; }

.testimonial__title { max-width: var(--page); margin: 0 auto; padding: 25px 20px 43px; }

.testimonial__row {
  display: flex;
  width: 88%;
  max-width: calc(var(--page) * 0.88);
  margin: 0 auto;
  padding-bottom: 10px;
}

.testimonial__media,
.testimonial__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  min-width: 0;
  margin: 0;
}
.testimonial__media { padding: 42.5px 30px 12.5px; }
.testimonial__media img { display: block; width: 100%; height: auto; border-radius: 50%; }

.testimonial__body { padding: 32.5px 20px 2.5px; }
.testimonial__body blockquote { margin: 13px 0 0; }

.testimonial__name {
  margin-top: 13px;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1px;
}

/* ---------- Contact ---------- */
.contact { padding: 100px 0; }

.contact__row { display: flex; max-width: var(--page); margin: 0 auto; padding: 15px 0; }

.contact__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 47.2%; padding: 0 20px; }
.contact__text .heading { align-self: stretch; margin-top: 10px; }

.contact__email {
  margin-top: 10px;
  padding: 0 5px;
  color: #000;
  font-family: var(--font-head);
  font-size: var(--email);
  font-weight: 700;
  text-decoration: none;
}

.contact__map { width: 52.8%; padding: 0 20px 2px; }
.contact__map a,
.contact__map img { display: block; }
.contact__map img { width: 100%; height: auto; }

/* ---------- Footer ---------- */
.site-footer { background: var(--beige); padding: 15px 0; }

.site-footer__row { display: flex; max-width: var(--page); margin: 0 auto; }

.site-footer__logo { display: flex; flex-direction: column; justify-content: center; width: 22.8%; padding: 10px 30px; }
.site-footer__logo img { display: block; width: 200px; height: auto; }

.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 51.9%;
  padding: 0 20px;
}
.site-footer__contact a {
  margin-top: 5px;
  padding: 0 5px;
  color: #000;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.site-footer__contact a:first-child { margin-top: 10px; }

.site-footer__social { display: flex; justify-content: center; align-items: flex-start; width: 25.3%; padding: 20px 20px 0; }

.site-footer__instagram { position: relative; display: block; width: 44px; height: 41px; color: var(--navy); }
/* The original drew this glyph with browser-synthesised bold; the hairline
   stroke reproduces that weight. */
.site-footer__instagram svg {
  position: absolute;
  top: 7px;
  left: 6px;
  width: 21.875px;
  height: 25px;
  overflow: visible;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 18px;
  stroke-linejoin: round;
}

/* ---------- Phone layout ---------- */
@media (max-width: 767px) {
  .site-header { padding: 55px 10px 45px; }
  .site-header__inner { justify-content: center; }
  .site-header__logo { margin-right: 0; }
  .site-nav { display: none; }

  .hero { display: none; }
  .carousel-section { display: block; padding: 55px 20px; }

  .about { padding-top: 53px; }
  .about__grid { flex-direction: column; padding: 0 10px; }
  .about__main,
  .about__side { width: 100%; }
  .about__main { padding: 0 0 25px; }
  .about__side { order: 0; padding: 25px 0; }
  .about__collage { display: none; }

  .faq-card { width: 100%; max-width: none; padding: 40px 10px; }

  .testimonial__title { padding-left: 10px; padding-right: 10px; }
  .testimonial__row { flex-direction: column; width: 100%; max-width: none; padding: 0 10px 10px; }
  .testimonial__media,
  .testimonial__body { width: 100%; }
  .testimonial__media { padding: 35px 10px 20px; }
  .testimonial__body { padding: 25px 0 10px; }

  .contact__row { flex-direction: column; padding: 15px 10px; }
  .contact__text,
  .contact__map { width: 100%; padding-left: 0; padding-right: 0; }

  .site-footer__row { flex-direction: column; padding: 0 10px; }
  .site-footer__logo,
  .site-footer__contact,
  .site-footer__social { width: 100%; padding-left: 0; padding-right: 0; }
  .site-footer__logo { padding-left: 10px; }
}

@media (max-width: 480px) {
  .site-header { padding: 45px 10px; }
  .carousel-section { padding: 0; }
  .site-footer__logo { align-items: center; padding-left: 0; }
  .faq-section > .btn-row--cta { padding-top: 10px; }
  .faq__panel p { padding-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track,
  .carousel__dot,
  .faq__button,
  .faq__icon,
  .js .faq__panel,
  .js .faq__item.is-open .faq__panel { transition: none; }
}