/* Shared styles for every page of the site. */
:root {
  color-scheme: light;
  --bg: #F3EAD3;
  --bg-alt: #EBDDBE;
  --card: #EBDDBE;
  --text: #2B2018;
  --text-muted: #6B5744;
  --border: #D9C6A0;
  --dark: #7A4B28;
  --on-dark: #FFFFFF;
  --on-dark-muted: #EAD9BE;
  --accent: #55665A;
  --accent-contrast: #FFFFFF;
  --focus: #1D4ED8;
  --field-border: #8C7359;
}

* { box-sizing: border-box; }
html {
  scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px));
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.55;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
h1, h2, h3 {
  font-family: 'Big Shoulders Display', 'Work Sans', sans-serif;
  font-weight: 700;
  line-height: 0.92;
  margin: 0;
  color: var(--text);
  letter-spacing: 0.01em;
}
a { color: inherit; }
img, svg { max-width: 100%; }
/* Skip link: hidden until focused with the keyboard */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--dark);
  color: var(--on-dark);
  font-weight: 600;
  border-radius: 3px;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top, 0px);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: 1080px;
  margin: 0 auto;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark {
  height: 38px;
  width: auto;
  flex-shrink: 0;
  display: block;
}
.brand { min-width: 0; }
.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.nav-right .btn { white-space: nowrap; }
/* Phones: the sticky bottom bar (.mobile-bar) carries Call / Text / Quote,
   so the header shows just the logo and name. */
@media (max-width: 639px) {
  .nav { padding: 12px 16px; }
  .nav-right .btn { display: none; }
}
.nav-phone {
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  font-size: 0.95rem;
  display: none;
}
@media (min-width: 640px) { .nav-phone { display: inline; } }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn-primary {
  background: var(--dark);
  color: var(--on-dark);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  border-color: var(--dark);
  color: var(--text);
}
.btn-outline:hover { background: var(--bg-alt); }
.btn-accent {
  background: var(--accent);
  color: var(--accent-contrast);
}
.btn-sm { padding: 9px 16px; font-size: 0.85rem; }

/* Hero */
.hero {
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--border);
}
.hero-tag {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0 0 14px;
  max-width: 52ch;
}
.hero h1 {
  font-size: clamp(3rem, 10vw, 6.2rem);
  text-transform: uppercase;
}
.hero h1 span { display: block; }
.hero-photo { display: none; margin: 0; }
@media (min-width: 900px) {
  .hero .wrap {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 56px;
    align-items: center;
  }
  .hero-photo {
    display: block;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
    background: var(--card);
  }
  .hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
.hero-sub {
  margin: 22px 0 30px;
  max-width: 56ch;
  font-size: 1.15rem;
  color: var(--text);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 34px;
}
@media (max-width: 479px) {
  .hero { padding-top: 40px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .hero-actions .btn-primary { flex-basis: 100%; }
}
.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  max-width: 560px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
@media (min-width: 640px) { .facts { grid-template-columns: repeat(3, 1fr); max-width: 600px; } }
.fact {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}

section { padding: 56px 0; }
.section-border { border-bottom: 1px solid var(--border); }
.section-alt { background: var(--bg-alt); }

.section-head { max-width: 62ch; margin-bottom: 34px; }
.section-head h2 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  text-transform: uppercase;
}
.section-head p {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (max-width: 759px) {
  .gallery > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .gallery > li:last-child:nth-child(odd) .gallery-tile { aspect-ratio: 4 / 3; }
}
.gallery { list-style: none; margin: 0; padding: 0; }
.gallery-tile {
  margin: 0;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--card);
  position: relative;
  overflow: hidden;
}
.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 10px;
  padding-top: 28px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #FFFFFF;
  background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0));
}

/* Reviews carousel
   Without JS (or with one review) every review is listed. As a carousel, all slides sit in one grid cell
   (so the box is as tall as the longest review and nothing jumps) and only the
   current one is visible. The whole section is hidden while it has no reviews. */
.reviews:not(:has(.review)) { display: none; }
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.review {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 28px;
  margin: 0;
}
.review-stars { color: #B45309; font-size: 1.15rem; letter-spacing: 2px; line-height: 1; }
.review blockquote {
  margin: 14px 0 18px;
  font-size: 1.12rem;
  line-height: 1.6;
  max-width: 68ch;
}
.review blockquote p { margin: 0 0 10px; }
.review blockquote p:last-child { margin-bottom: 0; }
.review-meta { font-size: 0.88rem; color: var(--text-muted); }
.review-meta strong { color: var(--text); font-weight: 600; }
.review-source { display: block; margin-top: 2px; font-size: 0.82rem; }
.reviews-controls { display: none; }
.reviews-footer { margin-top: 18px; font-size: 0.92rem; }
.reviews-footer a { font-weight: 600; }

.is-carousel .review-list { gap: 0; }
.is-carousel .review-list > li { grid-area: 1 / 1; display: flex; }
.is-carousel .review { flex: 1; }   /* every card as tall as the longest review */
.is-carousel .review-list > li:not(.is-current) { visibility: hidden; }
.is-carousel .review-list > li.is-current { animation: review-in 0.35s ease; }
@keyframes review-in { from { opacity: 0; } to { opacity: 1; } }
.is-carousel .reviews-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.reviews-controls button {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--dark);
  border-radius: 3px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.reviews-controls button:hover { background: var(--bg-alt); }
.review-dots { display: flex; gap: 2px; margin: 0 4px; }
.reviews-controls .review-dot {
  min-width: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
}
.review-dot::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--dark);
}
.review-dot[aria-current="true"]::before { background: var(--dark); }
.reviews-controls .review-dot:hover { background: transparent; }
.reviews-controls .review-dot:hover::before { background: var(--border); }
.reviews-controls .review-dot[aria-current="true"]:hover::before { background: var(--dark); }
.review-count {
  display: none;
  min-width: 56px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Phones: a "3 / 10" counter instead of a row of dots */
@media (max-width: 639px) {
  .review-dots { display: none; }
  .review-count { display: inline-block; }
  .is-carousel .reviews-controls { flex-wrap: nowrap; }
}
@media (max-width: 479px) {
  .review { padding: 22px; }
  .review blockquote { font-size: 1.02rem; }
}

/* Services grid */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  padding: 1px;             /* room for the item outlines at the edges */
}
/* Each item draws its own 1px frame, so a part-filled last row has no empty colored block. */
.services-grid > * { box-shadow: 0 0 0 1px var(--border); }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-item {
  background: var(--bg);
  padding: 24px;
}
.service-item h3 {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
  letter-spacing: normal;
  margin: 0 0 8px;
}
.service-item p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* How it works */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  padding: 20px 24px 20px 0;
  border-top: 2px solid var(--text);
}
.step-num {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}
.step h3 { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.3; letter-spacing: normal; font-family: 'Work Sans', sans-serif; font-weight: 700; }
.step p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }

/* About */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 760px) { .about { grid-template-columns: 380px 1fr; gap: 40px; } }
.about-photo {
  aspect-ratio: 4 / 3;      /* phones: landscape crop centered on Rob (see object-position below) */
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--card);
  overflow: hidden;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 44%;
  display: block;
}
@media (min-width: 760px) {
  .about-photo { aspect-ratio: 3 / 4; }          /* desktop: the portrait photo, uncropped */
  .about-photo img { object-position: 50% 50%; }
}
.about-body p { margin: 0 0 14px; }
.badge-row { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1.2fr; } }
.contact-direct .btn { width: 100%; margin-bottom: 12px; }
.contact-direct p { color: var(--text-muted); font-size: 0.92rem; margin-top: 20px; }

form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
input, textarea, select {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: 3px;
  background: var(--bg);
  color: var(--text);
}
::placeholder { color: var(--text-muted); opacity: 1; }
textarea { resize: vertical; min-height: 110px; }
.row-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .row-2 { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: 0.82rem; color: var(--text-muted); margin: 0; }
.field-hint { font-size: 0.82rem; color: var(--text-muted); margin: 0; }
.optional { font-weight: 400; }
/* The real file input is visually hidden (still focusable); the label below is the visible button. */
.file-input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.file-button { justify-self: start; cursor: pointer; }
.file-input:focus-visible + .file-button { outline: 3px solid var(--focus); outline-offset: 3px; }
.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.file-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 0.88rem;
}
.file-list .file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list .file-size { color: var(--text-muted); white-space: nowrap; }
.file-list button {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--field-border);
  border-radius: 3px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0; font-size: 0.92rem; font-weight: 600; }
.form-status:empty { display: none; }
.form-status.is-error { color: #9B1C1C; }
.form-progress { width: 100%; height: 10px; accent-color: var(--accent); }
.form-progress[hidden] { display: none; }
.form-done {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
}
.form-done h3 { font-size: 1.7rem; text-transform: uppercase; margin-bottom: 10px; }
.form-done p { margin: 0 0 8px; }
.form-done a { white-space: nowrap; }

/* Phone action bar */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(43, 32, 24, 0.08);
}
.mobile-bar .btn { padding: 12px 6px; white-space: nowrap; }
/* With JS, the bar slides in once the hero's own buttons have scrolled away
   (without JS it simply stays visible). */
.js .mobile-bar { transform: translateY(110%); transition: transform 0.25s ease; }
.js .mobile-bar.is-visible { transform: none; }
@media (max-width: 639px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 640px) { .mobile-bar { display: none; } }

/* Footer */
footer {
  background: var(--dark);
  color: var(--on-dark);
  padding: 40px 0;
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}
footer .foot-brand {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
}
footer a { text-decoration: none; color: var(--on-dark); font-weight: 600; }
footer .foot-meta { color: var(--on-dark-muted); font-size: 0.85rem; margin-top: 6px; }

.hero h1 { opacity: 0; animation: rise 0.6s ease forwards 0.1s; }
.hero-sub, .hero-actions, .facts, .hero-photo { opacity: 0; animation: rise 0.6s ease forwards 0.35s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero-sub, .hero-actions, .facts, .hero-photo { opacity: 1; animation: none; }
}

/* ---- Multi-page additions (audience pages) ---- */

/* Header links: wide screens only; phones use the home-page cards and footer links */
.nav-links { display: none; gap: 22px; margin-right: 6px; }
.nav-links a { text-decoration: none; font-weight: 600; font-size: 0.92rem; color: var(--text-muted); white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 1000px) { .nav-links { display: flex; } }

/* Audience page hero: same look as the home hero, with a smaller headline */
.page-hero h1 { font-size: clamp(2.6rem, 8vw, 4.8rem); }
.page-hero .hero-tag a { color: inherit; }

/* Checklist of what the client gets */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--border); }
@media (min-width: 760px) { .checklist { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.checklist li {
  position: relative;
  padding: 14px 0 14px 34px;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 4px; top: 19px;
  width: 14px; height: 8px;
  border-left: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  transform: rotate(-45deg);
}

/* Static reviews (audience pages): cards side by side on wide screens */
.review-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 860px) { .review-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .review-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
.review-grid .review { height: 100%; }
.review-grid .review blockquote { font-size: 1.02rem; }

/* Closing call to action on audience pages */
.cta-band .wrap { display: grid; gap: 18px; }
.cta-band .hero-actions { margin-bottom: 0; }

/* Footer page links */
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot-links a { font-weight: 600; }

/* Home page: two audience headers right under the hero, linking to their pages */
.audience-strip { padding: 0; }
.audience-strip .wrap { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .audience-strip .wrap { grid-template-columns: 1fr 1fr; } }
.audience-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.audience-link:last-child { border-bottom: none; }
@media (min-width: 760px) {
  .audience-link { border-bottom: none; padding: 34px 0; }
  .audience-link:first-child { padding-right: 40px; }
  .audience-link + .audience-link { border-left: 1px solid var(--border); padding-left: 40px; }
}
.audience-text { display: grid; gap: 6px; }
.audience-for { font-size: 0.85rem; font-weight: 600; color: var(--accent); }
.audience-name {
  font-family: 'Big Shoulders Display', 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  line-height: 1;
  text-transform: uppercase;
}
.audience-arrow { margin-left: auto; font-size: 1.6rem; font-weight: 600; transition: transform 0.15s ease; }
.audience-link:hover .audience-arrow { transform: translateX(4px); }
.audience-link:hover .audience-name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }