/* ===== Design tokens =====
   Palette pulled straight from the existing DG logo (near black,
   warm orange-red, cream) rather than inventing a new one, since this
   is the one site of the four where the client already has a
   recognizable, established mark worth building around. */
:root {
  --ink: #17130f;
  --ink-soft: #241d16;
  --paper: #f2ece0;
  --paper-soft: #e8dfcd;
  --amber: #9a5a34;
  --amber-soft: #b17d52;
  --text: #201a14;
  --text-soft: #5c5245;
  --cream: #f7f2e8;
  --radius: 16px;
  --serif: "Roboto Slab", Georgia, serif;
  --sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.65;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
}

h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
}

h3 {
  font-size: 1.2rem;
  color: var(--amber);
  margin-bottom: 14px;
}

p {
  margin: 0 0 18px;
}

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--amber);
  margin: 0 0 12px;
}

.eyebrow-light {
  color: var(--amber-soft);
}

.center {
  text-align: center;
}

/* ===== Header ===== */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 40px;
  background: var(--ink);
  color: var(--cream);
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--cream);
}

.site-logo {
  height: 52px;
  width: auto;
}

.site-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
}

.site-nav {
  display: flex;
  gap: 28px;
  font-size: 0.9rem;
  font-weight: 600;
}

.site-nav a {
  text-decoration: none;
  color: var(--cream);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.site-nav a:hover {
  border-color: var(--amber);
  color: var(--amber-soft);
}

.header-phone {
  text-decoration: none;
  color: var(--amber-soft);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

@media (max-width: 800px) {
  .site-header {
    flex-direction: column;
    padding: 20px 24px;
    gap: 14px;
  }
  .site-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
  }
}

/* ===== Hero =====
   Originally this was a full-bleed photo with the text overlaid on
   top, but David's face sat directly behind the heading, the two
   fought for attention in the same spot. Split into two columns
   instead, text on a plain dark background on one side, the photo
   flush on the other, so neither one has to compete with the other
   for the same space. Same side-by-side technique used for the About
   section below and across the other three sites. */
.hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 80vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
  color: var(--cream);
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 40px;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-logo {
  width: 140px;
  margin: 0 auto 28px;
}

.hero h1 {
  color: var(--cream);
}

.hero-tagline {
  max-width: 400px;
  margin: 0 auto 8px;
  color: var(--paper-soft);
  font-size: 1.05rem;
}

.hero-place {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  color: var(--amber-soft);
  margin: 0 0 36px;
}

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 14px 32px;
  border-radius: var(--radius);
  transition: opacity 0.2s ease;
}

.btn:hover {
  opacity: 0.85;
}

.btn-amber {
  background: var(--amber);
  color: var(--cream);
}

/* ===== Services ===== */
.services {
  max-width: 1100px;
  margin: 0 auto;
  padding: 90px 40px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 44px;
}

.service-card {
  background: var(--paper-soft);
  border: 1px solid rgba(23, 19, 15, 0.1);
  border-radius: var(--radius);
  padding: 28px;
}

.service-card ul {
  margin: 0;
  padding-left: 20px;
  color: var(--text-soft);
}

.service-card li {
  margin-bottom: 6px;
}

.services-note {
  text-align: center;
  margin: 36px 0 0;
  color: var(--text-soft);
  font-style: italic;
}

/* ===== Price List =====
   Pulled from a photo of the price sheet that had a large logo
   watermark baked in, transcribed to real text here (with the exact
   figures double-checked by compositing that photo onto a white
   background to see past the watermark) rather than embedding the
   image, so it's actually readable and works properly on a phone. */
.price-list {
  max-width: 900px;
  margin: 0 auto;
  padding: 90px 40px;
}

/* Full width photo banner sitting right under the header on the
   Price List page, same width: 100vw edge-to-edge trick used
   elsewhere on the site. It's a plain <div>, not a <section>, since
   it sits outside .price-list's max-width container in the HTML. */
.price-banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 380px;
  overflow: hidden;
}

.price-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* A smaller, contained photo dropped in between two of the price
   groups as a visual break partway down the page, rather than full
   bleed like the banner above. */
.price-inset {
  max-width: 380px;
  margin: 10px auto 50px;
}

.price-inset img {
  border-radius: var(--radius);
}

.price-disclaimer {
  color: var(--text-soft);
  font-size: 0.85rem;
  font-style: italic;
  margin: -16px 0 50px;
}

.price-group {
  margin-bottom: 50px;
}

.price-group h3 {
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1rem;
  border-bottom: 2px solid var(--amber);
  padding-bottom: 10px;
  margin-bottom: 4px;
}

.price-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each row is a flex space-between: the item name on the left, the
   price on the right, with a dashed line under every row (like a
   menu) so the eye can track across even on a wide line. */
.price-items li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(23, 19, 15, 0.18);
}

.price-items li span:first-child {
  color: var(--text);
}

.price-items li span:last-child {
  color: var(--text-soft);
  font-weight: 600;
  white-space: nowrap;
}

.price-items--plain li {
  border-bottom: none;
  padding: 4px 0;
  color: var(--text-soft);
}

.price-group--poa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.price-quote {
  margin: 0;
  padding-left: 24px;
  border-left: 3px solid var(--amber);
  font-family: var(--serif);
  font-style: italic;
  color: var(--text-soft);
}

.price-quote a {
  color: var(--amber);
}

.price-footnotes {
  margin-top: 50px;
  font-size: 0.8rem;
  color: var(--text-soft);
  font-style: italic;
  line-height: 1.9;
}

@media (max-width: 800px) {
  .price-group--poa {
    grid-template-columns: 1fr;
  }
}

/* ===== About =====
   Two column: photo of David on one side, bio text on the other,
   same side-by-side pattern used across the other three sites. */
.about {
  background: var(--paper-soft);
  padding: 90px 40px;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
  align-items: center;
}

.about-photo img {
  border-radius: var(--radius);
}

.about-text {
  max-width: 620px;
}

@media (max-width: 800px) {
  .about {
    grid-template-columns: 1fr;
    padding: 60px 24px;
  }
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-text {
    padding: 60px 24px;
  }
  .hero-photo {
    height: 45vh;
  }
}

.about-role {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-soft);
  margin: -10px 0 24px;
}

.about-text p {
  color: var(--text-soft);
}

blockquote {
  margin: 32px 0 0;
  padding-left: 24px;
  border-left: 3px solid var(--amber);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--text);
}

/* ===== Reviews ===== */
.reviews {
  background: var(--ink);
  color: var(--cream);
  padding: 90px 40px;
}

.reviews-heading {
  color: var(--cream);
}

.reviews-grid {
  max-width: 1200px;
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.review-card {
  background: var(--ink-soft);
  border-radius: var(--radius);
  padding: 28px;
  border-top: 3px solid var(--amber);
}

/* Avatar + name/role sit side by side above the quote. object-fit:
   cover on the avatar means whatever shape the source photo is, it
   gets cropped to fill this fixed 52x52 circle rather than squashing
   or leaving gaps, the same trick used for photo icons on
   leighratcliffe.com. */
.review-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.review-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.review-quote {
  font-style: italic;
  color: var(--paper-soft);
  font-size: 0.95rem;
}

.review-name {
  font-family: var(--serif);
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--cream);
}

.review-name a {
  color: inherit;
  text-decoration: none;
}

.review-name a:hover {
  text-decoration: underline;
}

.review-role {
  font-size: 0.85rem;
  color: var(--amber-soft);
  margin: 0;
}

/* ===== Press =====
   The <video> tag uses preload="none" plus a poster image (in the
   HTML), so the browser shows a static thumbnail with a play button
   and doesn't fetch any of the actual video file until someone
   clicks play. Without that, browsers can start downloading part of
   a video as soon as the page loads, which would waste a lot of data
   for anyone who never even plays it. */
.press {
  background: var(--paper-soft);
  padding: 90px 40px;
}

.press-video {
  max-width: 800px;
  margin: 40px auto 0;
}

.press-video video {
  width: 100%;
  display: block;
  border-radius: var(--radius);
  background: var(--ink);
}

.press-caption {
  max-width: 800px;
  margin: 16px auto 0;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.press-community {
  max-width: 900px;
  margin: 70px auto 0;
  padding-top: 50px;
  border-top: 1px solid rgba(23, 19, 15, 0.15);
}

.press-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.press-gallery img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ===== Contact banner ===== */
.contact-banner {
  background: var(--amber);
  color: var(--cream);
  padding: 90px 40px;
}

.contact-banner h2 {
  color: var(--cream);
}

.contact-banner .eyebrow-light {
  color: rgba(247, 242, 232, 0.8);
}

.contact-grid {
  max-width: 900px;
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.contact-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: var(--cream);
  background: rgba(23, 19, 15, 0.15);
  border-radius: var(--radius);
  padding: 22px;
  transition: background 0.2s ease;
}

.contact-item:hover {
  background: rgba(23, 19, 15, 0.3);
}

.contact-label {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  opacity: 0.85;
}

.contact-value {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
}

/* ===== Footer ===== */
.site-footer {
  background: var(--ink);
  color: rgba(247, 242, 232, 0.6);
  text-align: center;
  padding: 44px 24px;
  font-size: 0.8rem;
}

.footer-logo {
  height: 40px;
  margin: 0 auto 14px;
}