/* ==========================================================================
   GLOBAL DESIGN TOKENS
   Edit this section to change the design across every page.
   Breakpoints: mobile 47.9375rem (767px), tablet 64rem (1024px).
   ========================================================================== */
:root {
  --color-ink: #1e1e1e;
  --color-olive: #676b56;
  --color-taupe: #9a8a78;
  --color-sand: #ccc3ad;
  --color-ivory: #f4ede3;
  --color-paper: #f8f7f4;
  --color-white: #fff;
  --color-muted: #66665f;
  --color-rating: #986d24;
  --color-primary: var(--color-olive);
  --color-text: var(--color-ink);
  --color-background: var(--color-paper);
  --color-border: var(--color-sand);
  --color-hero-overlay: linear-gradient(90deg, rgb(15 17 14 / 80%), rgb(15 17 14 / 25%));
  --font-body: "Poppins", Arial, sans-serif;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --size-xs: .75rem;
  --size-small: .8rem;
  --size-caption: .85rem;
  --size-input: .95rem;
  --size-body: 1rem;
  --size-lead: 1.1rem;
  --size-quote: 1.15rem;
  --size-card: 1.5rem;
  --size-cta-heading: clamp(1.75rem, 3vw, 2.5rem);
  --size-heading: clamp(2rem, 3.5vw, 3.75rem);
  --size-display: clamp(3rem, 5.7vw, 6rem);
  --size-mobile-display: 2.6rem;
  --line-body: 1.8;
  --line-heading: 1.12;
  --tracking-heading: -.045em;
  --tracking-display: -.055em;
  --tracking-eyebrow: .18em;
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-hero: 6rem;
  --space-section: clamp(4rem, 7vw, 7rem);
  --gutter: 2rem;
  --container-max: 80rem;
  --intro-max: 48rem;
  --hero-text-max: 34rem;
  --hero-title-max: 58rem;
  --logo-width: 12.5rem;
  --header-padding: 1.35rem;
  --hero-height: 43rem;
  --hero-mobile-height: 36rem;
  --button-padding: 1rem 1.75rem;
  --field-padding: .9rem 1rem;
  --field-min-height: 3rem;
  --mobile-bar-height: 5.5rem;
  --icon-size: 1.5rem;
  --border-width: 1px;
  --radius: 0;
  --transition: .2s ease;
  --shadow-bar: 0 -.25rem 1.5rem rgb(30 30 30 / 10%);
  --line-display: 1.04;
  --line-card: 1.3;
  --line-ui: 1.5;
  --line-eyebrow: 1.6;
  --line-lead: 1.7;
  --line-caption: 1.2;
  --line-wordmark: 1.15;
  --tracking-card: -.02em;
  --tracking-button: .04em;
  --tracking-nav: .1em;
  --tracking-hero: .2em;
  --tracking-wordmark: .03em;
  --scroll-offset: 7rem;
  --menu-padding: .75rem 1rem;
  --form-gap: 1.25rem;
  --quick-contact-gap: .4rem;
  --quick-contact-padding: .85rem .5rem;
  --quick-contact-min-height: 4.25rem;
  --supplier-width: 8rem;
  --supplier-mobile-width: 7rem;
  --footer-wordmark-size: 2rem;
  --utility-min-height: 55vh;
  --contact-map-height: clamp(16rem, 25vw, 22.5rem);
  --size-service-display: clamp(2.75rem, 4.2vw, 4.5rem);
  --size-service-mobile-display: clamp(2.25rem, 9vw, 3rem);
  --size-service-heading: clamp(1.8rem, 3vw, 3.25rem);
  --service-header-offset: 6rem;
  --service-image-height: clamp(22rem, 34vw, 32rem);
  --service-caption-background: rgb(30 30 30 / 85%);
  --size-contact-phone: clamp(1.5rem, 2.5vw, 2.25rem);
  --gallery-dialog-width: 70rem;
  --gallery-viewer-height: min(65dvh, 45rem);
  --gallery-backdrop: rgb(15 17 14 / 88%);
  --nav-submenu-width: 16rem;
  --nav-submenu-shadow: 0 .75rem 2rem rgb(30 30 30 / 12%);
  --z-header: 100;
  --z-menu: 110;
  --z-contact: 200;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Foundations and shared layout */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-offset);
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--line-body);
  color: var(--color-text);
  background: var(--color-background);
}
h1, h2, h3, p, figure, blockquote {
  margin: 0;
}
h1, h2, h3 {
  font-weight: var(--weight-medium);
}
h2, .page-title {
  font-size: var(--size-heading);
  letter-spacing: var(--tracking-heading);
  line-height: var(--line-heading);
}
h3 {
  font-size: var(--size-card);
  line-height: var(--line-card);
  letter-spacing: var(--tracking-card);
}
p {
  color: var(--color-muted);
}
a {
  color: inherit;
  text-underline-offset: .2em;
}
a:hover {
  color: var(--color-primary);
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
button, input, textarea {
  font: inherit;
  border-radius: var(--radius);
}
button, summary {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: .65;
}
:focus-visible {
  outline: 2px solid var(--color-olive);
  outline-offset: 4px;
}
[hidden] {
  display: none !important;
}
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}
.section {
  padding: var(--space-section) var(--gutter);
}
.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  min-width: 0;
}
.stack-small {
  gap: var(--space-xs);
}
.section-stack {
  gap: var(--space-xl);
}
.section-intro {
  max-width: var(--intro-max);
}
.split {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
}
.align-start {
  align-items: flex-start;
}
.content-column {
  flex: 1 1 0;
  min-width: 0;
}
.eyebrow {
  color: var(--color-olive);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  line-height: var(--line-eyebrow);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--button-padding);
  border: var(--border-width) solid var(--color-olive);
  background: var(--color-olive);
  color: var(--color-white);
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-button);
  line-height: var(--line-ui);
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}
.button:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-white);
}
.button-light {
  color: var(--color-ink);
  background: var(--color-ivory);
  border-color: var(--color-ivory);
}
.button-light:hover, .button-outline:hover {
  color: var(--color-ink);
  background: var(--color-white);
  border-color: var(--color-white);
}
.button-outline {
  background: transparent;
  border-color: var(--color-sand);
  color: var(--color-white);
}
.text-link {
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  text-decoration: none;
  padding-block: var(--space-xs);
}
.small {
  font-size: var(--size-small);
}
.skip-link {
  position: fixed;
  top: var(--space-sm);
  left: var(--space-sm);
  transform: translateY(-200%);
  z-index: calc(var(--z-contact) + 1);
  background: var(--color-white);
  padding: var(--space-sm);
}
.skip-link:focus {
  transform: none;
}
/* Shared header and native, keyboard-accessible menu */
.site-header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: var(--z-header);
  padding: var(--header-padding) var(--gutter);
  background: var(--color-white);
  border-bottom: var(--border-width) solid var(--color-ivory);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  position: relative;
}
.brand {
  flex: 0 0 auto;
  width: var(--logo-width);
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.desktop-nav a:not(.button) {
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.mobile-menu {
  display: none;
}
.mobile-menu > summary {
  list-style: none;
  border: var(--border-width) solid var(--color-olive);
  padding: var(--menu-padding);
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-nav);
  line-height: var(--line-ui);
}
.mobile-menu > summary::-webkit-details-marker {
  display: none;
}
.mobile-menu-panel {
  position: absolute;
  inset: calc(100% + var(--header-padding)) 0 auto;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: var(--border-width) solid var(--color-ivory);
}
.mobile-menu-panel a {
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
.mobile-menu-panel a:hover {
  background: var(--color-ivory);
}
/* Workshop hero: source is assigned only when video is allowed */
.hero {
  position: relative;
  min-height: var(--hero-height);
  isolation: isolate;
  background: var(--color-ink) url("/assets/images/peerless-hero-still.jpg") center / cover no-repeat;
  color: var(--color-white);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0;
}
.hero.video-ready .hero-video {
  opacity: 1;
}
.hero-overlay {
  min-height: inherit;
  display: flex;
  align-items: center;
  padding: var(--space-hero) var(--gutter);
  background: var(--color-hero-overlay);
}
.hero h1 {
  font-size: var(--size-display);
  line-height: var(--line-display);
  letter-spacing: var(--tracking-display);
  max-width: var(--hero-title-max);
}
.hero-eyebrow {
  color: var(--color-sand);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-hero);
}
.hero-description {
  color: var(--color-ivory);
  max-width: var(--hero-text-max);
  font-size: var(--size-lead);
  line-height: var(--line-lead);
}
.video-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-md);
  background: transparent;
  border: 0;
  color: var(--color-white);
  padding: var(--space-xs);
  font-size: var(--size-small);
}
.trust-strip {
  padding: var(--space-md) var(--gutter);
  background: var(--color-ivory);
}
.trust-inner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
}
.trust-inner p {
  color: var(--color-olive);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  line-height: var(--line-eyebrow);
}
/* Story, collections, inspiration and process */
.photo-wide {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}
figcaption {
  margin-top: var(--space-sm);
}
.collection {
  background: var(--color-ivory);
}
.material-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  width: 100%;
}
.material-card {
  padding: var(--space-lg) var(--space-md);
  background: var(--color-paper);
  border-top: var(--border-width) solid var(--color-olive);
}
.inspiration-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 55%;
}
.suppliers {
  padding: var(--space-xl) var(--gutter);
  border-block: var(--border-width) solid var(--color-ivory);
  background: var(--color-white);
}
.supplier-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
}
.supplier-row img {
  width: var(--supplier-width);
  aspect-ratio: 2 / 1;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.process {
  background: var(--color-white);
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xl);
  width: 100%;
}
.step-number {
  color: var(--color-taupe);
  font-size: var(--size-card);
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xl);
  width: 100%;
}
.review {
  border-top: var(--border-width) solid var(--color-sand);
  padding-block: var(--space-lg);
}
.review blockquote {
  font-size: var(--size-quote);
  line-height: var(--line-lead);
}
.review figcaption {
  margin: 0;
}
/* Shared estimate form */
.contact-section {
  background: var(--color-ink);
  color: var(--color-white);
}
.contact-section > .container > .content-column p {
  color: var(--color-sand);
}
.contact-section > .container > .content-column .eyebrow {
  color: var(--color-sand);
}
.form-card {
  flex: 1.15 1 0;
  min-width: 0;
  padding: var(--space-xl);
  background: var(--color-white);
  color: var(--color-ink);
}
.estimate-form {
  width: 100%;
  gap: var(--form-gap);
  align-items: stretch;
}
.field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
label {
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
}
input, textarea {
  width: 100%;
  min-height: var(--field-min-height);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-paper);
  color: var(--color-text);
  padding: var(--field-padding);
  font-size: var(--size-input);
}
textarea {
  resize: vertical;
}
.form-notice, .form-status {
  font-size: var(--size-small);
}
.form-status:empty {
  display: none;
}
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.contact-page, .utility-page {
  padding-top: calc(var(--space-section) + 6rem);
}
.utility-page {
  min-height: var(--utility-min-height);
}
/* Business profile map on Contact Us, sized to its column on every screen. */
.contact-map {
  width: 100%;
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: var(--contact-map-height);
  border: var(--border-width) solid var(--color-sand);
  background: var(--color-paper);
}
.contact-map > a {
  font-size: var(--size-small);
}
/* Shared footer and tablet/mobile quick contact */
.site-footer {
  padding: var(--space-2xl) var(--gutter) var(--space-lg);
  background: var(--color-ink);
  color: var(--color-ivory);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1.25fr 1fr;
  gap: var(--space-xl);
}
.site-footer p, .site-footer .eyebrow {
  color: var(--color-ivory);
}
.site-footer a {
  text-decoration: none;
  font-size: var(--size-caption);
}
.site-footer a:hover {
  color: var(--color-sand);
}
.footer-wordmark {
  font-size: var(--footer-wordmark-size);
  line-height: var(--line-wordmark);
  letter-spacing: var(--tracking-wordmark);
}
.copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--border-width) solid var(--color-muted);
  font-size: var(--size-xs);
}
.mobile-contact {
  display: none;
}
/* Tablet: logo + MENU, with contact actions fixed at the bottom */
@media (max-width: 64rem) {
  .site-header {
    position: relative;
  }
  .contact-page, .utility-page {
    padding-top: var(--space-section);
  }
  .desktop-nav {
    display: none;
  }
  .mobile-menu {
    display: block;
  }
  .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .material-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .split {
    gap: var(--space-lg);
  }
  .process-grid {
    gap: var(--space-lg);
  }
  .form-card {
    padding: var(--space-lg);
  }
  .supplier-row {
    justify-content: center;
  }
  .site-footer {
    padding-bottom: calc(var(--mobile-bar-height) + var(--space-lg) + env(safe-area-inset-bottom));
  }
  .mobile-contact {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--z-contact);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--color-white);
    border-top: var(--border-width) solid var(--color-sand);
    box-shadow: var(--shadow-bar);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-contact a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--quick-contact-gap);
    padding: var(--quick-contact-padding);
    min-height: var(--quick-contact-min-height);
    border-right: var(--border-width) solid var(--color-ivory);
    text-decoration: none;
    font-size: var(--size-xs);
    font-weight: var(--weight-medium);
    line-height: var(--line-caption);
  }
  .mobile-contact a:last-child {
    border-right: 0;
  }
  .mobile-contact a:hover {
    background: var(--color-ivory);
  }
  .mobile-contact img {
    width: var(--icon-size);
    height: var(--icon-size);
    object-fit: contain;
  }
}
/* Mobile */
@media (max-width: 47.9375rem) {
  :root {
    --gutter: 1.25rem;
    --space-hero: 3rem;
    --space-2xl: 2rem;
    --header-padding: 1rem;
    --logo-width: 11rem;
  }
  html {
    scroll-padding-top: var(--space-sm);
  }
  .hero {
    min-height: var(--hero-mobile-height);
    background-image: url("/assets/images/cremosa-kitchen-960.webp");
    background-position: 62% center;
  }
  .hero h1 {
    font-size: var(--size-mobile-display);
  }
  .hero-overlay {
    align-items: flex-start;
  }
  .hero-eyebrow {
    max-width: 20rem;
  }
  .hero-description {
    font-size: var(--size-body);
  }
  .trust-inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    text-align: center;
  }
  .split {
    flex-direction: column;
    align-items: stretch;
  }
  .content-column, .form-card {
    flex-basis: auto;
  }
  .material-grid, .process-grid, .review-grid, .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .material-grid {
    gap: var(--space-md);
  }
  .inspiration-image {
    aspect-ratio: 4 / 5;
  }
  .supplier-row img {
    width: var(--supplier-mobile-width);
  }
  .form-card {
    padding: var(--space-md);
  }
  .estimate-form .button {
    width: 100%;
  }
  .footer-grid {
    gap: var(--space-lg);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    transition: none !important;
  }
}

/* Material service pages: shared components for all countertop materials. */
.service-hero {
  padding: calc(var(--space-xl) + var(--service-header-offset)) var(--gutter) var(--space-2xl);
  background: var(--color-ivory);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: 0;
  margin: 0 0 var(--space-xl);
  list-style: none;
  color: var(--color-muted);
  font-size: var(--size-small);
}
.breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--space-xs);
  color: var(--color-taupe);
}
.breadcrumbs a {
  text-decoration: none;
}
.service-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2xl);
}
.service-hero h1 {
  font-size: var(--size-service-display);
  line-height: var(--line-display);
  letter-spacing: var(--tracking-display);
}
.service-tagline {
  color: var(--color-olive);
  font-size: var(--size-card);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-card);
}
.service-description {
  max-width: var(--hero-text-max);
}
.service-hero-media {
  position: relative;
  min-width: 0;
}
.service-hero-media img {
  width: 100%;
  height: var(--service-image-height);
  object-fit: cover;
  object-position: center;
}
.service-hero-media figcaption {
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-white);
  background: var(--service-caption-background);
  font-size: var(--size-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
}
.service-jump-nav {
  padding: var(--space-md) var(--gutter);
  background: var(--color-white);
  border-bottom: var(--border-width) solid var(--color-ivory);
}
.service-jump-nav .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  align-items: center;
}
.service-jump-nav .eyebrow {
  margin-right: auto;
}
.service-jump-nav a {
  font-size: var(--size-small);
  text-decoration: none;
  padding-block: var(--space-xs);
}
.service-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--space-2xl);
  align-items: start;
}
.service-editorial h2,
.service-local-grid h2 {
  font-size: var(--size-service-heading);
}
.service-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}
.service-feature {
  border-top: var(--border-width) solid var(--color-olive);
  padding-top: var(--space-lg);
}
.service-detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}
.service-detail-list article {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-bottom: var(--space-lg);
  border-bottom: var(--border-width) solid var(--color-sand);
}
.service-cost-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  width: 100%;
  align-items: start;
}
.service-planning-card {
  padding: var(--space-xl);
  background: var(--color-paper);
  border-top: var(--border-width) solid var(--color-olive);
}
.service-checklist {
  margin: 0;
  padding-left: var(--space-md);
  color: var(--color-muted);
}
.service-checklist li + li {
  margin-top: var(--space-xs);
}
.service-process-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  padding: 0;
  margin: 0;
  list-style: none;
}
.service-process-list li {
  border-top: var(--border-width) solid var(--color-sand);
  padding-top: var(--space-lg);
}
.service-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xl);
  width: 100%;
}
.service-comparison article {
  padding: var(--space-lg);
  border: var(--border-width) solid var(--color-sand);
}
.service-faq {
  min-width: 0;
}
.service-faq details {
  border-top: var(--border-width) solid var(--color-sand);
}
.service-faq details:last-child {
  border-bottom: var(--border-width) solid var(--color-sand);
}
.service-faq summary {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  list-style: none;
  font-weight: var(--weight-medium);
  line-height: var(--line-ui);
}
.service-faq summary::-webkit-details-marker {
  display: none;
}
.service-faq summary::after {
  content: "+";
  color: var(--color-olive);
  font-size: var(--size-card);
  line-height: 1;
}
.service-faq details[open] summary::after {
  content: "−";
}
.service-faq details > div {
  padding-bottom: var(--space-md);
}
.service-local-strip {
  padding: var(--space-2xl) var(--gutter);
  border-top: var(--border-width) solid var(--color-sand);
  background: var(--color-ivory);
}
.service-local-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}
.service-local-contact {
  border-left: var(--border-width) solid var(--color-sand);
  padding-left: var(--space-2xl);
}
address {
  font-style: normal;
}
@media (max-width: 64rem) {
  :root {
    --service-header-offset: 0rem;
  }
  .service-hero-grid,
  .service-editorial,
  .service-cost-grid {
    gap: var(--space-lg);
  }
  .service-hero h1 {
    font-size: var(--size-heading);
  }
  .service-process-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-jump-nav .eyebrow {
    width: 100%;
  }
  .service-planning-card {
    padding: var(--space-lg);
  }
}
@media (max-width: 47.9375rem) {
  :root {
    --service-image-height: 16rem;
  }
  .service-hero-grid,
  .service-editorial,
  .service-cost-grid,
  .service-card-grid,
  .service-comparison,
  .service-local-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .service-hero h1 {
    font-size: var(--size-service-mobile-display);
  }
  .breadcrumbs ol {
    margin-bottom: var(--space-lg);
  }
  .service-jump-nav .container {
    gap: var(--space-xs) var(--space-md);
  }
  .service-process-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .service-local-contact {
    border-left: 0;
    border-top: var(--border-width) solid var(--color-sand);
    padding-left: 0;
    padding-top: var(--space-lg);
  }
}

.service-detail-photo {
  width: 100%;
  margin-top: var(--space-sm);
}
.service-detail-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.service-detail-photo figcaption {
  font-size: var(--size-xs);
}

/* Responsive project gallery with a native, keyboard-accessible photo viewer. */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  width: 100%;
}
.project-gallery-item {
  min-width: 0;
}
.project-gallery-item > a {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--color-ivory);
}
.project-gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--transition);
}
.project-gallery-item a:hover img,
.project-gallery-item a:focus-visible img {
  transform: scale(1.025);
}
.project-gallery-item figcaption {
  margin-top: var(--space-sm);
  color: var(--color-olive);
  font-size: var(--size-small);
}
.gallery-enlarge {
  position: absolute;
  right: var(--space-xs);
  bottom: var(--space-xs);
  background: var(--color-white);
  color: var(--color-ink);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--size-xs);
  opacity: 0;
  transition: opacity var(--transition);
}
.project-gallery-item a:hover .gallery-enlarge,
.project-gallery-item a:focus-visible .gallery-enlarge {
  opacity: 1;
}
.gallery-dialog {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--gallery-dialog-width);
  max-height: calc(100dvh - var(--space-lg));
  padding: var(--space-md);
  border: 0;
  background: var(--color-paper);
  color: var(--color-ink);
}
.gallery-dialog::backdrop {
  background: var(--gallery-backdrop);
}
.gallery-dialog-top,
.gallery-dialog-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.gallery-dialog-top {
  margin-bottom: var(--space-sm);
}
.gallery-dialog-top p,
.gallery-dialog-controls,
.gallery-dialog figcaption {
  font-size: var(--size-small);
}
.gallery-dialog button {
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-width) solid var(--color-sand);
  background: var(--color-white);
  color: var(--color-ink);
}
.gallery-dialog button:hover {
  background: var(--color-ivory);
}
.gallery-dialog figure img {
  width: 100%;
  height: var(--gallery-viewer-height);
  object-fit: contain;
  background: var(--color-ivory);
}
.gallery-dialog figcaption {
  margin-block: var(--space-sm);
}
body.gallery-open {
  overflow: hidden;
}
@media (max-width: 64rem) {
  .project-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gallery-enlarge {
    opacity: 1;
  }
}
@media (max-width: 47.9375rem) {
  :root {
    --gallery-viewer-height: 50dvh;
  }
  .project-gallery {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (max-width: 47.9375rem) {
  .gallery-dialog figure img {
    height: auto;
    max-height: var(--gallery-viewer-height);
  }
}

/* Three related surfaces now that all four material pages are available. */
.related-material-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 64rem) {
  .related-material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.9375rem) {
  .related-material-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Shared stone dropdown. Native details supports touch and keyboard without JS. */
.nav-dropdown {
  position: relative;
}
.nav-dropdown > summary {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  line-height: var(--line-ui);
  padding-block: var(--space-xs);
}
.nav-dropdown > summary::-webkit-details-marker {
  display: none;
}
.nav-dropdown > summary::after {
  content: "⌄";
  color: var(--color-olive);
}
.nav-dropdown[open] > summary::after {
  content: "⌃";
}
.stone-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: var(--nav-submenu-width);
  padding: var(--space-xs);
  background: var(--color-paper);
  border: var(--border-width) solid var(--color-sand);
  box-shadow: var(--nav-submenu-shadow);
}
.stone-submenu a {
  display: block;
  padding: var(--space-sm);
  white-space: nowrap;
}
.stone-submenu a:hover,
.stone-submenu a:focus-visible {
  color: var(--color-olive);
  background: var(--color-ivory);
}
@media (max-width: 64rem) {
  .mobile-menu-panel {
    max-height: calc(100dvh - var(--mobile-bar-height) - var(--scroll-offset));
    overflow-y: auto;
  }
  .mobile-menu-panel .nav-dropdown > summary {
    padding: var(--space-sm) var(--space-md);
    justify-content: space-between;
    font-size: var(--size-body);
  }
  .mobile-menu-panel .stone-submenu {
    position: static;
    min-width: 0;
    padding: 0 0 var(--space-xs) var(--space-md);
    border: 0;
    background: var(--color-ivory);
    box-shadow: none;
  }
  .mobile-menu-panel .stone-submenu a {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--size-small);
    white-space: normal;
  }
}

/* Project portfolio: original named collections, shared gallery components. */
.projects-page-hero {
  padding: calc(var(--space-xl) + var(--service-header-offset)) var(--gutter) var(--space-2xl);
  background: var(--color-ivory);
}
.projects-page-hero h1 {
  font-size: var(--size-service-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--line-display);
}
.projects-page-cover img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.project-case {
  border-bottom: var(--border-width) solid var(--color-ivory);
}
.project-case:nth-of-type(even) {
  background: var(--color-white);
}
.project-case-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
}
.project-count {
  color: var(--color-muted);
  font-size: var(--size-xs);
}
@media (max-width: 47.9375rem) {
  .projects-page-hero h1 {
    font-size: var(--size-service-mobile-display);
  }
  .project-case-heading {
    flex-direction: column;
    align-items: start;
    gap: var(--space-sm);
  }
}

/* About page: original company story and workshop photography. */
.about-page-hero {
  padding: calc(var(--space-xl) + var(--service-header-offset)) var(--gutter) var(--space-2xl);
  background: var(--color-ivory);
}
.about-page-hero h1 {
  font-size: var(--size-service-display);
  line-height: var(--line-display);
  letter-spacing: var(--tracking-display);
}
.about-lead {
  font-size: var(--size-lead);
  color: var(--color-ink);
}
.about-lead a {
  text-decoration-color: var(--color-sand);
}
.about-hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.about-section-title {
  font-size: var(--size-service-heading);
}
.about-veteran {
  border-top: var(--border-width) solid var(--color-sand);
  padding-top: var(--space-lg);
}
.about-team-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 45% center;
}
.about-workshop-media {
  width: 100%;
}
.about-workshop-media img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
}
.about-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  width: 100%;
}
.about-invitation {
  background: var(--color-white);
}
.about-invitation address {
  color: var(--color-muted);
}
@media (max-width: 64rem) {
  .about-review-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
  }
}
@media (max-width: 47.9375rem) {
  .about-page-hero h1 {
    font-size: var(--size-service-mobile-display);
  }
  .about-team-media img {
    aspect-ratio: 4 / 3;
  }
  .about-workshop-media img {
    aspect-ratio: 4 / 3;
  }
}

/* Keep the studio credit on the right, including when the footer wraps. */
.developer-credit {
  margin-inline-start: auto;
  text-align: right;
}

/* Shared review-card layout. Content is configured per stone, not duplicated. */
.stone-reviews { background: var(--color-ivory); }
.stone-reviews-notice { color: var(--color-muted); font-size: var(--size-small); align-self: end; }
.stone-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.stone-review-card {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
}
.stone-review-card h3 { font-size: var(--size-card); line-height: var(--line-card); letter-spacing: var(--tracking-card); }
.stone-review-stars { color: var(--color-rating); font-size: var(--size-quote); letter-spacing: var(--tracking-hero); }
.stone-review-card p { color: var(--color-muted); }
.stone-review-label { font-size: var(--size-xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--color-olive); }
.stone-review-card-footer { margin-top: auto; padding-top: var(--space-sm); border-top: var(--border-width) solid var(--color-border); width: 100%; font-size: var(--size-small); }
@media (max-width: 64rem) {
  .stone-review-grid { grid-template-columns: 1fr; }
  .stone-review-card { padding: var(--space-md); }
}

.stone-review-card blockquote { margin: 0; font-size: var(--size-body); }

/* A compact, contrasting invitation above the dark footer. */
.project-cta {
  padding-block: var(--space-xl);
  background: var(--color-ivory);
  color: var(--color-ink);
}
.project-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xl);
}
.project-cta h2 { font-size: var(--size-cta-heading); }
.project-cta p:not(.eyebrow) { color: var(--color-muted); max-width: var(--intro-max); }
.project-cta .button { white-space: nowrap; }
@media (max-width: 47.9375rem) {
  .project-cta-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .project-cta .button { justify-self: start; }
}

/* Location pages reuse the established stone-page components. */
.location-jump-links { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.location-caption { color: var(--color-muted); }
.location-planning-card {
  padding: var(--space-xl);
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
}
.service-areas { padding-block: var(--space-xl); border-top: var(--border-width) solid var(--color-border); background: var(--color-white); }
.service-areas-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.service-areas h2 { font-size: var(--size-card); line-height: var(--line-card); letter-spacing: var(--tracking-card); }
.service-areas-groups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); }
.service-areas ul { padding: 0; margin: var(--space-xs) 0 0; list-style: none; }
.service-areas li { margin-top: var(--space-xs); font-size: var(--size-small); }
.service-areas a { text-decoration: underline; text-underline-offset: var(--border-width); }
@media (max-width: 47.9375rem) {
  .service-areas-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .location-planning-card { padding: var(--space-md); }
  .location-jump-links { gap: var(--space-sm); }
}