/* ==========================================================================
   Shared scaffolding for every Pace Digital Works sample website.
   Each demo sets its own tokens (colour + font) in its own <style> block,
   so a spa and a builder can share structure without looking the same.
   ========================================================================== */

:root {
  /* Defaults — every demo overrides these */
  --d-bg: #FFFFFF;
  --d-alt: #F7F6F3;
  --d-surface: #FFFFFF;
  --d-ink: #16181A;
  --d-body: #5A6169;
  --d-line: #E6E4DF;
  --d-brand: #1F3A2A;
  --d-on-brand: #FFFFFF;
  --d-accent: #D9B25F;
  --d-accent-ink: #8A6A21;
  --d-display: Georgia, serif;
  --d-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --d-r: 12px;
  --d-r-lg: 22px;
  --d-shadow: 0 2px 8px rgba(0, 0, 0, .05), 0 14px 40px rgba(0, 0, 0, .08);
  --d-ease: cubic-bezier(.22, .61, .36, 1);
  --d-wrap: 1160px;
  --d-gut: clamp(20px, 5vw, 44px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--d-bg); color: var(--d-ink);
  font-family: var(--d-sans); font-size: 16.5px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--d-display); color: var(--d-ink);
  line-height: 1.12; letter-spacing: -.015em; margin: 0 0 .5em; font-weight: 600;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 3px solid var(--d-accent); outline-offset: 3px; border-radius: 4px; }
.d-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Pace Digital Works ribbon — same on every demo -------------- */
.pd-bar {
  background: #100E0C; color: #B8AEA2; font-family: var(--d-sans);
  font-size: 13.5px; position: relative; z-index: 60;
}
.pd-bar__in {
  max-width: var(--d-wrap); margin-inline: auto; padding: 9px var(--d-gut);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pd-bar strong { color: #FBF6EE; font-weight: 600; }
.pd-bar__tag {
  background: rgba(216, 185, 120, .16); color: #D8B978;
  border-radius: 2px; padding: 3px 10px; font-size: 11px;
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.pd-bar a {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  background: #C4622D; color: #FFF7F1; text-decoration: none;
  border-radius: 2px; padding: 8px 18px; font-weight: 600; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .2s var(--d-ease);
}
.pd-bar a:hover { background: #D4753E; }
@media (max-width: 620px) {
  .pd-bar__in { font-size: 12.5px; }
  .pd-bar a { margin-left: 0; width: 100%; justify-content: center; }
}

/* ---------- Layout ------------------------------------------------------- */
.d-wrap { width: 100%; max-width: var(--d-wrap); margin-inline: auto; padding-inline: var(--d-gut); }
.d-sec { padding-block: clamp(56px, 8vw, 104px); }
.d-sec--alt { background: var(--d-alt); }
.d-sec--brand { background: var(--d-brand); color: var(--d-on-brand); }
.d-sec--brand h2, .d-sec--brand h3 { color: var(--d-on-brand); }
.d-sec--tight { padding-block: clamp(40px, 5vw, 64px); }

.d-head { max-width: 660px; margin-bottom: clamp(32px, 4vw, 52px); }
.d-head--c { margin-inline: auto; text-align: center; }
.d-eyebrow {
  display: inline-block; font-family: var(--d-sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--d-accent-ink); margin-bottom: 14px;
}
.d-sec--brand .d-eyebrow { color: var(--d-accent); }
.d-h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); }
.d-h2 { font-size: clamp(1.85rem, 4vw, 2.85rem); }
.d-h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.d-lede { font-size: clamp(1rem, 1.4vw, 1.13rem); color: var(--d-body); max-width: 58ch; }
.d-sec--brand .d-lede, .d-sec--brand p { color: rgba(255, 255, 255, .78); }

/* ---------- Buttons ------------------------------------------------------ */
.d-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 13px 27px; border: 1.5px solid transparent;
  border-radius: var(--d-r); font-family: var(--d-sans); font-size: 15px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: transform .2s var(--d-ease), background-color .2s var(--d-ease),
              color .2s var(--d-ease), border-color .2s var(--d-ease);
}
.d-btn:hover { transform: translateY(-2px); }
.d-btn--pill { border-radius: 999px; }
.d-btn--1 { background: var(--d-brand); color: var(--d-on-brand); }
.d-btn--1:hover { filter: brightness(1.12); }
.d-btn--2 { background: var(--d-accent); color: #1B1B18; }
.d-btn--2:hover { filter: brightness(1.07); }
.d-btn--o { background: transparent; color: currentColor; border-color: currentColor; opacity: .92; }
.d-btn--o:hover { opacity: 1; }
.d-btn--w { background: #fff; color: var(--d-ink); }
.d-btn--sm { min-height: 44px; padding: 10px 20px; font-size: 14px; }
.d-btns { display: flex; flex-wrap: wrap; gap: 12px; }

.d-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.d-ico--sm { width: 17px; height: 17px; stroke-width: 2; }
.d-ico--lg { width: 30px; height: 30px; stroke-width: 1.6; }

/* ---------- Site navigation ---------------------------------------------- */
.d-nav { position: sticky; top: 0; z-index: 50; background: var(--d-surface);
  border-bottom: 1px solid var(--d-line); }
.d-nav--clear { background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); }
.d-nav__in { display: flex; align-items: center; gap: 20px; height: 72px; }
.d-logo { font-family: var(--d-display); font-size: 21px; font-weight: 600; letter-spacing: -.02em;
  text-decoration: none; color: var(--d-ink); margin-right: auto; display: flex; align-items: center; gap: 10px; }
.d-logo small { display: block; font-family: var(--d-sans); font-size: 9.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--d-body); }
.d-logo__mark { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--d-brand); color: var(--d-on-brand); }
.d-menu { display: flex; align-items: center; gap: 3px; }
.d-menu a { padding: 9px 13px; border-radius: 8px; font-size: 14.5px; font-weight: 500;
  color: var(--d-body); text-decoration: none; transition: color .2s var(--d-ease), background-color .2s var(--d-ease); }
.d-menu a:hover { color: var(--d-ink); background: var(--d-alt); }
/* The call-to-action inside the menu is for the mobile drawer only —
   on a wide screen the standalone button next to it is the visible one. */
.d-menu > .d-btn { display: none; }
.d-burger { display: none; width: 46px; height: 46px; border: 1.5px solid var(--d-line);
  border-radius: 10px; background: var(--d-surface); color: var(--d-ink);
  align-items: center; justify-content: center; }
@media (max-width: 940px) {
  .d-menu, .d-nav__in > .d-btn { display: none; }
  .d-burger { display: flex; }
  .d-menu.is-open { display: flex; flex-direction: column; align-items: stretch;
    position: absolute; inset: 72px 0 auto; padding: 12px var(--d-gut) 22px;
    background: var(--d-surface); border-bottom: 1px solid var(--d-line); box-shadow: var(--d-shadow); }
  .d-menu.is-open a { padding: 13px 10px; font-size: 16px; }
  .d-menu.is-open .d-btn { display: inline-flex; margin-top: 8px; }
}

/* ---------- Hero: full-bleed image with text over it --------------------- */
.d-hero { position: relative; min-height: clamp(480px, 76vh, 720px); display: grid; align-items: center;
  color: #fff; overflow: hidden; }
.d-hero__bg { position: absolute; inset: 0; z-index: 0; }
.d-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.d-hero__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .42) 52%, rgba(0, 0, 0, .18) 100%); }
.d-hero__in { position: relative; z-index: 1; padding-block: clamp(60px, 9vw, 110px); }
.d-hero h1 { color: #fff; max-width: 16ch; margin-bottom: 20px; }
.d-hero p { color: rgba(255, 255, 255, .88); max-width: 52ch; font-size: clamp(1rem, 1.4vw, 1.15rem); margin-bottom: 28px; }
.d-hero .d-eyebrow { color: #fff; opacity: .85; }
.d-hero--center { text-align: center; }
.d-hero--center h1, .d-hero--center p { margin-inline: auto; }
.d-hero--center .d-btns { justify-content: center; }
.d-hero--center .d-hero__bg::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .32) 45%, rgba(0, 0, 0, .62)); }

/* ---------- Hero: split text and picture --------------------------------- */
.d-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px); align-items: center; }
.d-split--wide { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
@media (max-width: 900px) { .d-split, .d-split--wide { grid-template-columns: minmax(0, 1fr); } }
.d-shero { padding-block: clamp(48px, 7vw, 92px); }
.d-shero h1 { margin-bottom: 20px; }
.d-shero .d-lede { margin-bottom: 28px; }
.d-media { border-radius: var(--d-r-lg); overflow: hidden; box-shadow: var(--d-shadow); }
.d-media img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; }
.d-media--tall img { aspect-ratio: 3 / 3.7; }
.d-media--wide img { aspect-ratio: 16 / 9; }

/* ---------- Cards --------------------------------------------------------- */
.d-grid { display: grid; gap: clamp(16px, 2vw, 26px); }
.d-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.d-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.d-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .d-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 880px)  { .d-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .d-grid--2, .d-grid--3, .d-grid--4 { grid-template-columns: minmax(0, 1fr); } }

.d-card { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .28s var(--d-ease), box-shadow .28s var(--d-ease); }
.d-card:hover { transform: translateY(-4px); box-shadow: var(--d-shadow); }
.d-card__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--d-alt); }
.d-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--d-ease); }
.d-card:hover .d-card__img img { transform: scale(1.05); }
.d-card__b { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.d-card h3 { font-size: 1.18rem; margin-bottom: 7px; }
.d-card p { font-size: 14.8px; color: var(--d-body); margin-bottom: 0; }
.d-card__meta { margin-top: auto; padding-top: 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; font-size: 14px; }
.d-card__price { font-family: var(--d-display); font-size: 1.2rem; font-weight: 600; color: var(--d-accent-ink); }

.d-feat { background: var(--d-surface); border: 1px solid var(--d-line);
  border-radius: var(--d-r); padding: 26px 26px 28px; }
.d-feat__ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: var(--d-alt); color: var(--d-brand); margin-bottom: 16px; }
.d-feat h3 { font-size: 1.1rem; margin-bottom: 7px; }
.d-feat p { font-size: 14.8px; color: var(--d-body); }
.d-sec--brand .d-feat { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); }
.d-sec--brand .d-feat__ico { background: rgba(255, 255, 255, .1); color: var(--d-accent); }
.d-sec--brand .d-feat p { color: rgba(255, 255, 255, .75); }

/* ---------- Price / menu list -------------------------------------------- */
.d-list { display: grid; gap: 2px; }
.d-row { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-bottom: 1px dashed var(--d-line); }
.d-row__t { flex: none; max-width: 60%; }
.d-row__t b { display: block; font-family: var(--d-display); font-size: 1.08rem; font-weight: 600; }
.d-row__t span { font-size: 14.2px; color: var(--d-body); }
.d-row__dots { flex: 1; border-bottom: 1px dotted var(--d-line); transform: translateY(-4px); }
.d-row__p { flex: none; font-family: var(--d-display); font-size: 1.08rem; font-weight: 600; color: var(--d-accent-ink); }
/* On a phone there is no room for name, dotted leader and price on one line,
   so the price drops underneath instead of pushing the page sideways. */
@media (max-width: 560px) {
  .d-row { flex-wrap: wrap; }
  .d-row__t { max-width: 100%; }
  .d-row__dots { display: none; }
  .d-row__p { margin-left: auto; }
}

/* ---------- Gallery ------------------------------------------------------- */
.d-gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.d-gal img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--d-r);
  aspect-ratio: 1; transition: transform .4s var(--d-ease), filter .4s var(--d-ease); }
.d-gal a:hover img, .d-gal figure:hover img { transform: scale(1.03); filter: brightness(1.05); }
.d-gal > *:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.d-gal > *:nth-child(1) img { aspect-ratio: 1; }
@media (max-width: 780px) { .d-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-gal > *:nth-child(1) { grid-column: span 2; grid-row: auto; }
  .d-gal > *:nth-child(1) img { aspect-ratio: 16 / 10; } }

/* ---------- Stats --------------------------------------------------------- */
.d-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 700px) { .d-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.d-stat b { display: block; font-family: var(--d-display); font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 600; color: var(--d-accent); line-height: 1; margin-bottom: 6px; }
.d-stat span { font-size: 14px; opacity: .8; }

/* ---------- Quote --------------------------------------------------------- */
.d-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 900px) { .d-quotes { grid-template-columns: minmax(0, 1fr); } }
.d-quote { background: var(--d-surface); border: 1px solid var(--d-line);
  border-radius: var(--d-r); padding: 26px 26px 24px; }
.d-quote__stars { display: flex; gap: 3px; color: var(--d-accent); margin-bottom: 14px; }
.d-quote p { font-size: 15.4px; color: var(--d-body); margin-bottom: 16px; }
.d-quote b { font-size: 14.6px; }
.d-quote small { display: block; font-size: 13.4px; color: var(--d-body); }

/* ---------- Forms --------------------------------------------------------- */
.d-form { display: grid; gap: 16px; }
.d-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 600px) { .d-form__row { grid-template-columns: minmax(0, 1fr); } }
.d-field label { display: block; font-family: var(--d-sans); font-size: 13.6px; font-weight: 600;
  margin-bottom: 7px; color: var(--d-ink); }
.d-field input, .d-field select, .d-field textarea {
  width: 100%; min-height: 50px; padding: 13px 15px;
  border: 1.5px solid var(--d-line); border-radius: var(--d-r);
  background: #fff; color: var(--d-ink); font-size: 15.5px;
  transition: border-color .2s var(--d-ease), box-shadow .2s var(--d-ease); }
.d-field textarea { min-height: 118px; resize: vertical; }
.d-field input:focus, .d-field select:focus, .d-field textarea:focus {
  outline: none; border-color: var(--d-brand); box-shadow: 0 0 0 4px rgba(0, 0, 0, .06); }
.d-field small { display: block; font-size: 13px; color: var(--d-body); margin-top: 6px; }
.d-form__note { font-size: 13.6px; color: var(--d-body); }

.d-sent {
  display: none; align-items: flex-start; gap: 12px;
  background: #EAF5EC; border: 1.5px solid #B9DCC2; color: #1D5B2E;
  border-radius: var(--d-r); padding: 16px 18px; font-size: 14.8px; }
.d-sent.is-on { display: flex; }
.d-sent svg { flex: none; margin-top: 2px; }

/* ---------- Contact strip ------------------------------------------------- */
.d-contact { display: grid; gap: 14px; }
.d-contact a, .d-contact div {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  padding: 15px 18px; border: 1.5px solid var(--d-line); border-radius: var(--d-r);
  background: var(--d-surface); transition: border-color .2s var(--d-ease), transform .2s var(--d-ease); }
.d-contact a:hover { border-color: var(--d-brand); transform: translateX(3px); }
.d-contact__i { width: 42px; height: 42px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: var(--d-alt); color: var(--d-brand); }
/* Long email addresses have no spaces to break at, so let them break anywhere
   and allow the text column to shrink below its natural width. */
.d-contact a > span:last-child, .d-contact div > span:last-child { min-width: 0; }
.d-contact b { display: block; font-size: 15px; overflow-wrap: anywhere; }
.d-contact span { display: block; font-size: 13.6px; color: var(--d-body); overflow-wrap: anywhere; }

/* ---------- CTA band ------------------------------------------------------ */
.d-band { background: var(--d-brand); color: var(--d-on-brand); text-align: center;
  padding-block: clamp(48px, 6vw, 76px); }
.d-band h2 { color: var(--d-on-brand); margin-bottom: 14px; }
.d-band p { color: rgba(255, 255, 255, .8); max-width: 52ch; margin: 0 auto 26px; }
.d-band .d-btns { justify-content: center; }

/* ---------- Footer -------------------------------------------------------- */
.d-foot { background: var(--d-ink); color: rgba(255, 255, 255, .68); padding-block: 48px 30px; }
.d-foot__in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 36px; }
@media (max-width: 820px) { .d-foot__in { grid-template-columns: minmax(0, 1fr); gap: 26px; } }
.d-foot h4 { color: #fff; font-family: var(--d-sans); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.d-foot p, .d-foot li { font-size: 14.6px; }
.d-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.d-foot a { color: rgba(255, 255, 255, .68); text-decoration: none; transition: color .2s var(--d-ease); }
.d-foot a:hover { color: var(--d-accent); }
.d-foot .d-logo { color: #fff; margin-bottom: 14px; }
.d-foot .d-logo small { color: rgba(255, 255, 255, .55); }
.d-foot__base { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13.2px; }

/* ---------- Floating chat button ------------------------------------------ */
.d-chat { position: fixed; right: 18px; bottom: 18px; z-index: 70;
  display: inline-flex; align-items: center; gap: 9px;
  background: #25D366; color: #06331A; text-decoration: none;
  border-radius: 999px; padding: 13px 20px; font-weight: 600; font-size: 14.5px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .22); transition: transform .2s var(--d-ease); }
.d-chat:hover { transform: translateY(-3px); }
@media (max-width: 520px) { .d-chat span { display: none; } .d-chat { padding: 15px; } }

/* ---------- Reveal -------------------------------------------------------- */
.d-rv { opacity: 0; transform: translateY(16px); }
.d-rv.is-in { opacity: 1; transform: none;
  transition: opacity .5s var(--d-ease), transform .5s var(--d-ease); transition-delay: var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) {
  .d-rv { opacity: 1; transform: none; }
  .d-rv.is-in { transition: none; }
  .d-btn:hover, .d-card:hover, .d-chat:hover, .d-contact a:hover { transform: none; }
  .d-card__img img, .d-gal img { transition: none; }
}