:root {
  --color-purple: #4b2865;
  --color-purple-dark: #351b49;
  --color-purple-secondary: #4f2c6a; /* Lighter brand purple for small elements, where the dark purple reads as black */
  --color-gold: #a36b19;
  --color-background: #fbfaf7;
  --color-surface: #ffffff;
  --color-text: #302b33;
  --color-muted: #68616b;
  --color-border: #e8dfd4;
  --color-footer-background: #30251f;
  --color-trust-background: #fbfaf8;
  --color-gray-faint: #fdfcfb; /* Barely visible warm gray, lighter than the trust strip */
  --color-header-background: var(--color-gray-faint);
  --color-gold-on-dark: #d6b47f;
  --color-background-alt: #faf8fc;

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;

  --font-latin: "Jost";
  --font-thai: "Prompt";
  --font-body: var(--font-latin), var(--font-thai), sans-serif;
  --font-weight-normal: 300;
  --font-weight-emphasis: 500;
  --content-width: 72rem;
  --page-gutter: clamp(1rem, 4vw, 2rem);
}

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

html {
  scroll-padding-top: 6rem;
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
  line-height: 1.6;
}

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
}

.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

h1,
h2,
h3 {
  font-weight: var(--font-weight-normal);
  color: var(--color-purple-dark);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 {
  margin: 0 0 var(--space-3);
  font-size: clamp(2rem, 4vw, 3rem);
}

h2 {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
}

p {
  margin: 0 0 var(--space-3);
}

/* Readable text width: apply to prose only, never to sections or containers. */
.readable-width {
  width: 100%;
  max-width: 40rem;
}

a {
  color: var(--color-purple);
}

a:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-header-background);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-3);
}

.site-brand {
  flex: none;
  margin: 0;
  font-size: 1.5rem;
  font-weight: var(--font-weight-emphasis);
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.site-brand a {
  display: flex;
  flex-direction: column;
  color: var(--color-purple-dark);
  text-decoration: none;
}

/* Placeholder for the stylized DDD logo; sized to reserve room for it */
.site-brand-mark {
  color: var(--color-purple-secondary);
  font-size: 2rem;
  line-height: 1.1;
}

.site-brand-name {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.menu-toggle {
  display: none;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding-block: var(--space-1);
  border-bottom: 2px solid transparent;
  color: var(--color-purple-secondary);
  font-size: 0.95rem;
  font-weight: var(--font-weight-emphasis);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"],
.site-nav a[aria-current="location"] {
  border-bottom-color: var(--color-gold);
  color: var(--color-purple-dark);
}

.site-nav a[aria-current="page"],
.site-nav a[aria-current="location"] {
  border-bottom-color: var(--color-purple-secondary);
}

.has-submenu {
  position: relative;
}

.has-submenu > a::after {
  content: "";
  display: inline-block;
  width: 0.35em;
  height: 0.35em;
  margin-left: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.6;
  transform: translateY(-0.15em) rotate(45deg);
}

.site-nav .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  min-width: 11rem;
  padding: var(--space-1) 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transform: translateX(-50%);
}

.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu {
  display: block;
}

.submenu a {
  display: block;
  padding: var(--space-1) var(--space-3);
  font-size: 0.9rem;
  font-weight: var(--font-weight-emphasis);
  white-space: nowrap;
}

main.container {
  padding-block: var(--space-6);
}

/* Page-title banner: reusable band for internal pages without a photographic hero.
   Place it first inside main.page-main, followed by .container.page-body. */
.page-main {
  background: #ffffff;
}

.page-title-banner {
  padding-block: var(--space-4);
  background: var(--color-purple-dark);
  color: #ffffff;
}

/* Tight eyebrow/H1 group: no gap margin and short line-heights. Equal block padding keeps it vertically centered. */
.page-title-banner .page-title-eyebrow {
  margin: 0;
  color: var(--color-gold-on-dark);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  line-height: 1.1;
  text-transform: uppercase;
}

.page-title-banner h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.75rem, 5.5vw, 2.25rem);
  line-height: 1.2;
}

/* Home page: smaller company name that stays on one line down to narrow phones */
.page-title-banner--home h1 {
  font-size: clamp(1rem, 6.5vw, 2rem);
  white-space: nowrap;
}

.page-body {
  padding-block: var(--space-6);
}

.page-body > :first-child {
  margin-top: 0;
}

.project-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-1);
  color: var(--color-muted);
}

.project-breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.project-intro {
  max-width: 42rem;
  margin-top: var(--space-5);
}

.project-label {
  margin-bottom: var(--space-2);
  color: var(--color-gold);
  font-size: 0.75rem;
  font-weight: var(--font-weight-emphasis);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.project-intro > p:last-child {
  color: var(--color-muted);
}

.project-gallery {
  width: 100%;
  max-width: 62.5rem;
  column-count: 3;
  column-gap: var(--space-3);
  margin-top: var(--space-5);
}

.project-gallery-link--wide {
  column-span: all;
}

.project-gallery-link {
  display: block;
  break-inside: avoid;
  margin-bottom: var(--space-3);
}

.project-gallery-link img {
  display: block;
  width: 100%;
  height: auto;
}

main section {
  margin-top: var(--space-6);
}

/* The main container already pads its top; avoid doubling the gap under the trust strip */
main > .feature-section:first-child {
  margin-top: 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-3);
}

.gallery-link {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-surface);
}

.gallery-link img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Hero */
.hero {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-purple-dark);
}

.hero-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  --hero-motion: hero-zoom-left;
}

.hero-slide:nth-child(3n + 2) {
  --hero-motion: hero-zoom-right;
}

.hero-slide:nth-child(3n + 3) {
  --hero-motion: hero-zoom-up;
}

.hero-slide.is-previous {
  z-index: 1;
  opacity: 1;
}

.hero-slide.is-active {
  z-index: 2;
  opacity: 1;
}

/* The incoming slide fades in over the outgoing one, so the purple background never shows through. */
.hero-slide.is-entering {
  animation: hero-fade-in 2.3s ease-in-out;
}

/* Slow push-in on every slide, with a slightly different drift direction per slide. The drift stays inside the margin the scale adds, so no edge is revealed. */
.hero-slide.is-active img,
.hero-slide.is-previous img {
  animation: var(--hero-motion) 9.5s linear both;
  will-change: transform;
}

@keyframes hero-zoom-left {
  from {
    transform: scale(1) translate(0, 0);
  }

  to {
    transform: scale(1.04) translate(-0.8%, 0);
  }
}

@keyframes hero-zoom-right {
  from {
    transform: scale(1) translate(0, 0);
  }

  to {
    transform: scale(1.04) translate(0.8%, 0);
  }
}

@keyframes hero-zoom-up {
  from {
    transform: scale(1) translate(0, 0);
  }

  to {
    transform: scale(1.04) translate(0, -0.8%);
  }
}

@keyframes hero-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

.hero-dots {
  position: absolute;
  right: 0;
  bottom: var(--space-1);
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
}

.hero-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero-dot::before {
  content: "";
  width: 1.25rem;
  height: 2px;
  background: rgb(255 255 255 / 0.55);
  box-shadow: 0 0 4px rgb(0 0 0 / 0.35);
  transition: background-color 0.3s ease;
}

.hero-dot:hover::before {
  background: rgb(255 255 255 / 0.9);
}

.hero-dot[aria-current="true"]::before {
  background: var(--color-gold-on-dark);
}

.hero-dot:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-entering,
  .hero-slide.is-active img,
  .hero-slide.is-previous img {
    animation: none;
  }

  .hero-dot::before {
    transition: none;
  }
}

.hero-content {
  position: relative;
  padding-block: var(--space-5);
  color: #ffffff;
}

.hero-content .hero-eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-gold-on-dark);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Keep the eyebrow items paired so it wraps evenly (two items per row) on narrow screens. */
.hero-eyebrow-group {
  white-space: nowrap;
}

.hero-content h1 {
  max-width: 36rem;
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  color: #ffffff;
}

.hero-content p {
  max-width: 36rem;
  margin-bottom: 0;
  font-size: 0.9375rem;
}

@media (min-width: 64rem) {
  .hero {
    display: grid;
    grid-template-columns: 35fr 65fr;
    min-height: 520px;
  }

  .hero-media {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: auto;
  }

  .hero-content h1 {
    font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  }

  .hero-content {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    margin: 0;
    padding-block: var(--space-5);
    /* Align with the .container content edge, but never leave less than 20rem for text in the 35% panel. */
    padding-inline: max(var(--page-gutter), min(calc((100vw - var(--content-width)) / 2 + var(--page-gutter)), calc(35vw - 23rem))) var(--space-6);
  }
}

/* Trust strip */
.trust-strip {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-trust-background);
}

/* Mobile: scrollable row that bleeds into the page gutter, with edge fades like .portfolio-filters ul. */
.trust-list {
  --trust-fade: 5rem;
  --fade-start: 0px;
  --fade-end: 0px;
  display: flex;
  margin: 0 calc(var(--page-gutter) * -1);
  padding: 0 var(--page-gutter);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--page-gutter);
  scrollbar-width: none;
  /* Subtle edge fades, toggled by JS while there is more to scroll in that direction. */
  -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 0.05), #000 var(--fade-start), #000 calc(100% - var(--fade-end)), rgb(0 0 0 / 0.05));
  mask-image: linear-gradient(to right, rgb(0 0 0 / 0.05), #000 var(--fade-start), #000 calc(100% - var(--fade-end)), rgb(0 0 0 / 0.05));
}

.trust-list.has-fade-start {
  --fade-start: var(--trust-fade);
}

.trust-list.has-fade-end {
  --fade-end: var(--trust-fade);
}

.trust-list::-webkit-scrollbar {
  display: none;
}

.trust-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-1);
  align-items: center;
  flex: 0 0 60%;
  max-width: 20rem;
  padding: var(--space-3) var(--space-2);
  scroll-snap-align: start;
}

.trust-item + .trust-item {
  border-left: 1px solid var(--color-border);
}

.trust-icon {
  grid-row: 1 / 3;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-purple);
}

.trust-title,
.trust-text {
  margin: 0;
}

.trust-title {
  color: var(--color-purple-dark);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-emphasis);
  line-height: 1.3;
}

.trust-text {
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

@media (min-width: 64rem) {
  .trust-list {
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .trust-item {
    flex: 1 1 0;
    max-width: none;
    column-gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
  }

  .trust-icon {
    width: 2rem;
    height: 2rem;
  }

  .trust-title {
    font-size: 1rem;
  }

  .trust-text {
    font-size: 0.875rem;
  }

  .trust-item:first-child {
    padding-left: 0;
  }
}

/* Mini gallery: mobile swipe carousel; desktop layout comes from a page modifier (e.g. --curtains).
   Override --mini-gallery-ratio per section for non-4:3 images. */
.mini-gallery {
  --mini-gallery-ratio: 4 / 3;
  padding-block: var(--space-6);
  background: var(--color-surface);
}

.mini-gallery h2,
.intro-split h2,
.service-section h2,
.faq-section h2 {
  margin-bottom: var(--space-4);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.mini-gallery h2:has(+ .mini-gallery-intro) {
  margin-bottom: var(--space-2);
}

.mini-gallery-intro {
  margin: 0 0 var(--space-4);
}

.mini-gallery-list {
  display: flex;
  gap: var(--space-2);
  margin: 0 calc(var(--page-gutter) * -1);
  padding: 0 var(--page-gutter);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--page-gutter);
  scrollbar-width: none;
}

.mini-gallery-list::-webkit-scrollbar {
  display: none;
}

.mini-gallery-item {
  flex: 0 0 85%;
  min-width: 0;
  scroll-snap-align: start;
}

.mini-gallery .gallery-link,
.mini-gallery .gallery-link img {
  height: 100%;
}

.mini-gallery .gallery-link {
  border-radius: 0;
}

.mini-gallery .gallery-link img {
  aspect-ratio: var(--mini-gallery-ratio);
  object-fit: cover;
  transition: transform 0.4s ease;
}

@media (hover: hover) {
  .mini-gallery .gallery-link:hover img {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mini-gallery .gallery-link img {
    transition: none;
  }

  .mini-gallery .gallery-link:hover img {
    transform: none;
  }
}

@media (min-width: 64rem) {
  /* Generic desktop fallback: equal columns, any number of images. */
  .mini-gallery-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .mini-gallery-item {
    flex: none;
  }

  /* Curtains: main image + tall image on the right, two small images under the main one (needs 4 images). */
  .mini-gallery--curtains .mini-gallery-list {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: minmax(0, 22fr) minmax(0, 12fr);
    /* Compact preview: aspect ratio matches the former full-width 22rem + 12rem rows, so cell proportions are preserved. */
    max-width: 800px;
    aspect-ratio: 272 / 139;
  }

  .mini-gallery--curtains .mini-gallery-item:nth-child(1) {
    grid-column: 1 / 5;
  }

  .mini-gallery--curtains .mini-gallery-item:nth-child(2) {
    grid-column: 5 / 7;
    grid-row: 1 / 3;
  }

  .mini-gallery--curtains .mini-gallery-item:nth-child(3) {
    grid-column: 1 / 3;
  }

  .mini-gallery--curtains .mini-gallery-item:nth-child(4) {
    grid-column: 3 / 5;
  }

  /* The image fills its cell without contributing its intrinsic size, so the grid ratio above decides the cell shapes. */
  .mini-gallery--curtains .gallery-link {
    position: relative;
  }

  .mini-gallery--curtains .gallery-link img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    object-fit: cover;
  }

  /* Window film: page-specific desktop grid, starts as a copy of the curtains layout (4 images).
     Adjust columns, rows, ratio and item placement here without affecting other pages. */
  .mini-gallery--window-film .mini-gallery-list {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: minmax(0, 22fr) minmax(0, 12fr);
    max-width: 800px;
    aspect-ratio: 272 / 139;
  }

  .mini-gallery--window-film .mini-gallery-item:nth-child(1) {
    grid-column: 1 / 5;
  }

  .mini-gallery--window-film .mini-gallery-item:nth-child(2) {
    grid-column: 5 / 7;
    grid-row: 1 / 3;
  }

  .mini-gallery--window-film .mini-gallery-item:nth-child(3) {
    grid-column: 1 / 3;
  }

  .mini-gallery--window-film .mini-gallery-item:nth-child(4) {
    grid-column: 3 / 5;
  }

  .mini-gallery--window-film .gallery-link {
    position: relative;
  }

  .mini-gallery--window-film .gallery-link img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    object-fit: cover;
  }
}

/* Feature section */
.feature-eyebrow {
  margin-bottom: var(--space-1);
  color: var(--color-gold);
  font-size: 0.75rem;
  font-weight: var(--font-weight-emphasis);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Intro split: text 2/3 and square image 1/3 on desktop; image stacks below text on mobile and keeps its own ratio */
.intro-split {
  padding-block: var(--space-6);
}

.intro-split-layout {
  display: grid;
  gap: var(--space-5);
}

/* Mobile: the image sits between the heading and the text */
.intro-split-content {
  display: contents;
}

.intro-split-head {
  order: 1;
}

.intro-split-media {
  order: 2;
}

.intro-split-body {
  order: 3;
}

.intro-split-text {
  max-width: 40rem;
  margin: 0;
  color: var(--color-muted);
}

.intro-split-text + .intro-split-text {
  margin-top: var(--space-3);
}

.intro-split-media img {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: auto;
}

@media (min-width: 64rem) {
  .intro-split-media img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .intro-split-content {
    display: block;
    order: 0;
  }

  .intro-split-media {
    order: 0;
  }

  .intro-split-layout {
    grid-template-columns: 2fr 1fr;
    align-items: start;
    column-gap: var(--space-6);
  }
}

/* Process section */
.service-section {
  padding-block: var(--space-6);
  background: var(--color-background-alt);
}

.service-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (min-width: 64rem) {
  .service-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
    column-gap: var(--space-6);
  }

  .service-actions {
    justify-self: start;
    margin-top: 0;
  }
}

.service-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.service-number {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-purple-secondary);
  color: var(--color-surface);
  font-weight: var(--font-weight-emphasis);
  line-height: 1;
}

.service-title {
  margin: 0 0 0.25rem;
  color: var(--color-purple-dark);
  font-size: 1.125rem;
  font-weight: var(--font-weight-emphasis);
}

.service-text {
  margin: 0;
  color: var(--color-muted);
}

/* Testimonial: centered quote in a soft panel, with the gold quote mark straddling its top edge */
.testimonial {
  padding-block: var(--space-6);
  background: var(--color-surface);
}

.testimonial-card {
  position: relative;
  margin: var(--space-3) 0 0;
  padding: var(--space-6) var(--space-4) var(--space-5);
  background: var(--color-background);
  text-align: center;
}

.testimonial-mark {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3rem;
  height: 2rem;
  padding-inline: var(--space-1);
  background: var(--color-surface);
  color: var(--color-purple-secondary);
  transform: translate(-50%, -50%);
  box-sizing: content-box;
}

.testimonial-quote {
  max-width: 40rem;
  margin: 0 auto;
}

.testimonial-quote p {
  margin: 0;
  color: var(--color-purple-dark);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
}

.testimonial-author {
  margin-top: var(--space-4);
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: var(--font-weight-emphasis);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 64rem) {
  .testimonial-card {
    padding: var(--space-6) var(--space-6) var(--space-5);
  }
}

/* FAQ: native details/summary accordion, no JavaScript needed */
.faq-section {
  padding-block: var(--space-6);
  background: var(--color-surface);
}

/* Mobile: image stacks above the questions; desktop: image 1/3, questions 2/3.
   The image is cropped to 4:3 at all sizes to keep it short. */
.faq-layout {
  display: grid;
  gap: var(--space-5);
}

.faq-media img {
  display: block;
  width: 100%;
  max-height: 20rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 64rem) {
  .faq-layout {
    grid-template-columns: 1fr 2fr;
    align-items: start;
    column-gap: var(--space-6);
  }
}

.faq-list {
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  padding-inline-end: var(--space-3);
  color: var(--color-purple-dark);
  font-size: 1.0625rem;
  font-weight: var(--font-weight-emphasis);
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Purple circle with a white plus sign that turns into a minus when open.
   The bars are drawn with gradients so they stay centered regardless of font. */
.faq-item summary::after {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) center / 0.75rem 2px no-repeat,
    linear-gradient(var(--color-surface), var(--color-surface)) center / 2px 0.75rem no-repeat,
    var(--color-purple-secondary);
}

.faq-item summary:hover::after {
  background-color: var(--color-purple-dark);
}

.faq-item[open] summary::after {
  background-size: 0.75rem 2px, 2px 0;
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--color-purple-secondary);
  outline-offset: 2px;
}

.faq-item p {
  margin: 0;
  padding-bottom: var(--space-3);
  color: var(--color-muted);
}

.category-grid h2,
.feature-section h2,
.contact-follow h2,
.contact-area h2,
.contact-location h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
}

.contact-social {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.contact-social a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  color: var(--color-purple);
  text-decoration: none;
}

.contact-social a:hover,
.contact-social a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.contact-social img {
  flex: none;
  width: clamp(1.4rem, 2.5vw, 1.8rem);
  height: clamp(1.4rem, 2.5vw, 1.8rem);
  object-fit: contain;
  border-radius: 4px;
}

@media (min-width: 44rem) {
  .contact-social {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
  }
}

.feature-intro {
  max-width: 40rem;
  color: var(--color-muted);
}

.feature-link {
  position: relative;
  display: inline-block;
  padding-bottom: 0.35rem;
  color: var(--color-purple);
  font-weight: 400;
  text-decoration: none;
}

/* Thin gold accent line under the text and arrow. Drawn as a background (not a transformed
   element) so it snaps to whole pixels and looks the same weight in every section. */
.feature-link {
  background: linear-gradient(var(--color-gold), var(--color-gold)) left bottom / 82% 1px no-repeat;
  transition: background-size 0.3s ease;
}

.feature-link:hover,
.feature-link:focus-visible {
  background-size: 100% 1px;
}

.feature-link span {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 0.3s ease;
}

.feature-link:hover span,
.feature-link:focus-visible span {
  transform: translateX(0.25rem);
}

/* Quiet label above a gallery of real installation work (reusable) */
.gallery-label {
  margin-top: var(--space-5);
  margin-bottom: var(--space-1);
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-normal);
  opacity: 0.85;
}

.feature-link + .gallery-label {
  margin-top: var(--space-6);
}

.gallery-label + .feature-media,
.gallery-label + .feature-portraits,
.gallery-label + .feature-wide {
  margin-top: 0;
}

/* Wrapper that keeps the label and its images together in split sections */
.feature-gallery {
  margin-top: var(--space-6);
}

.feature-gallery .gallery-label {
  margin-top: 0;
}

/* Image ratios: large 5:4 (export 1500x1200), small 3:2 (export 1200x800) */
.feature-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  margin-top: var(--space-5);
}

.feature-photo {
  aspect-ratio: 3 / 2;
  border-radius: 0;
  background: #eee8e0;
}

.feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-photo:hover img {
  opacity: 0.94;
}

.feature-item {
  margin: 0;
}

.feature-item--main {
  grid-column: 1 / -1;
}

.feature-item--main .feature-photo {
  aspect-ratio: 5 / 4;
}

.feature-caption {
  display: block;
  padding-top: var(--space-1);
}

.feature-caption-title,
.feature-caption-text {
  display: block;
  line-height: 1.4;
}

.feature-caption-title {
  color: var(--color-purple-dark);
  font-size: 0.9375rem;
}

.feature-caption-text {
  color: var(--color-muted);
  font-size: 0.8125rem;
}

@media (min-width: 44rem) {
  .feature-media {
    grid-template-columns: 5fr 3fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    max-width: 56rem;
    aspect-ratio: 2 / 1;
  }

  .feature-item {
    position: relative;
    min-height: 0;
  }

  .feature-item--main {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .feature-photo,
  .feature-item--main .feature-photo {
    height: 100%;
    aspect-ratio: auto;
  }

  .feature-caption {
    position: absolute;
    inset: auto 0 0;
    padding: var(--space-5) var(--space-3) var(--space-3);
    background: linear-gradient(to top, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0));
    pointer-events: none;
  }

  .feature-caption-title {
    color: #ffffff;
  }

  .feature-caption-text {
    color: rgb(255 255 255 / 0.85);
  }
}

/* Split feature section: text left, portrait images right (3:4) */
.feature-portraits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  margin-top: var(--space-5);
}

.feature-photo--portrait {
  aspect-ratio: 3 / 4;
}

.feature-photo--square {
  aspect-ratio: 1 / 1;
}

@media (min-width: 44rem) {
  .feature-section--split {
    display: grid;
    grid-template-columns: 35fr 65fr;
    gap: var(--space-5);
    align-items: center;
  }

  .feature-section--split .feature-gallery {
    margin-top: 0;
  }

  /* Bottom padding nudges the vertically centred text slightly above centre */
  .feature-section--split .feature-text {
    padding-bottom: 4rem;
  }
}

@media (min-width: 64rem) {
  .feature-section--split .feature-gallery {
    width: 89%;
    justify-self: end;
  }
}

/* Reversed split feature section: text first in the markup (top on mobile), image left and text right on larger screens */
.feature-photo--wide {
  aspect-ratio: 16 / 9;
}

.feature-wide {
  margin-top: var(--space-5);
}

@media (min-width: 44rem) {
  .feature-section--reverse {
    grid-template-columns: 65fr 35fr;
  }

  .feature-section--reverse .feature-text {
    order: 2;
  }

  .feature-section--reverse .feature-wide {
    margin-top: 0;
  }
}

@media (min-width: 64rem) {
  .feature-section--reverse .feature-gallery {
    width: 89%;
  }

  .feature-section--reverse .feature-photo--wide {
    aspect-ratio: auto;
  }

  .feature-section--reverse .feature-photo--wide img {
    height: auto;
    aspect-ratio: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-link,
  .feature-link span {
    transition: none;
  }
}

/* Split feature section reveal: main.js adds .reveal-ready, then .is-revealed on scroll.
   Mobile uses a small, subtle offset; desktop (below) uses a larger slide. Reduced motion disables it in main.js. */
.feature-section--split.reveal-ready .feature-text,
.feature-section--split.reveal-ready .gallery-label,
.feature-section--split.reveal-ready .feature-item {
  opacity: 0;
  transform: translateX(0.75rem);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.feature-section--split.reveal-ready .feature-text {
  transform: translateX(-0.5rem);
}

.feature-section--reverse.reveal-ready .gallery-label,
.feature-section--reverse.reveal-ready .feature-item {
  transform: translateX(-0.75rem);
}

.feature-section--reverse.reveal-ready .feature-text {
  transform: translateX(0.5rem);
}

.feature-section--split.reveal-ready .feature-item + .feature-item {
  transition-delay: 0.1s;
}

.feature-section--split.reveal-ready.is-revealed .feature-text,
.feature-section--split.reveal-ready.is-revealed .gallery-label,
.feature-section--split.reveal-ready.is-revealed .feature-item {
  opacity: 1;
  transform: none;
}

@media (min-width: 64rem) {
  .feature-section--split.reveal-ready .feature-text,
  .feature-section--split.reveal-ready .gallery-label,
  .feature-section--split.reveal-ready .feature-item {
    transform: translateX(2.5rem);
    transition-duration: 0.9s;
  }

  .feature-section--split.reveal-ready .feature-text {
    transform: translateX(-1.25rem);
  }

  .feature-section--reverse.reveal-ready .gallery-label,
  .feature-section--reverse.reveal-ready .feature-item {
    transform: translateX(-2.5rem);
  }

  .feature-section--reverse.reveal-ready .feature-text {
    transform: translateX(1.25rem);
  }

  .feature-section--split.reveal-ready .feature-item + .feature-item {
    transition-delay: 0.15s;
  }

  .feature-section--split.reveal-ready.is-revealed .feature-text,
  .feature-section--split.reveal-ready.is-revealed .gallery-label,
  .feature-section--split.reveal-ready.is-revealed .feature-item {
    transform: none;
  }
}

/* Portfolio feed */
.portfolio-intro {
  max-width: 42rem;
  margin-bottom: var(--space-5);
}

.portfolio-intro > p:last-of-type {
  color: var(--color-muted);
}

.contact-address {
  font-style: normal;
}

.contact-map {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  max-height: 28rem;
  margin-top: var(--space-4);
  border: 1px dashed var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
}

.contact-intro {
  color: var(--color-muted);
}

.contact-options {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

main .contact-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: var(--space-3);
  align-items: center;
  margin-top: 0;
}

.contact-card-icon {
  width: clamp(1.4rem, 2.5vw, 1.8rem);
  height: clamp(1.4rem, 2.5vw, 1.8rem);
  color: var(--color-purple);
}

.contact-card h2 {
  margin: 0;
}

.contact-card p {
  grid-column: 1 / -1;
  align-self: start;
  max-width: 22rem;
  margin: var(--space-3) 0 var(--space-2);
  color: var(--color-muted);
}

.contact-card .cta-button {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (min-width: 60rem) {
  .contact-options {
    grid-template-columns: repeat(2, minmax(0, 22rem));
    justify-content: start;
    column-gap: 4rem;
  }
}

.portfolio-eyebrow,
.portfolio-category,
.contact-eyebrow {
  color: var(--color-gold);
  font-size: 0.75rem;
  font-weight: var(--font-weight-emphasis);
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.portfolio-eyebrow,
.contact-eyebrow {
  margin-bottom: var(--space-2);
}

.portfolio-filters[hidden] {
  display: none;
}

/* Single scrollable row that bleeds into the page gutter, like .mini-gallery-list.
   Vertical padding keeps the focus outline from being clipped by overflow. */
.portfolio-filters ul {
  --filter-fade: 1.5rem;
  --fade-start: 0px;
  --fade-end: 0px;
  display: flex;
  gap: var(--filter-gap, var(--space-4));
  margin: calc(var(--space-4) - 0.375rem) calc(var(--page-gutter) * -1) 0;
  padding: 0.375rem var(--page-gutter);
  list-style: none;
  overflow-x: auto;
  scroll-padding-inline: var(--page-gutter);
  scrollbar-width: none;
  /* Subtle edge fades, toggled by JS while there is more to scroll in that direction. */
  -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 0.25), #000 var(--fade-start), #000 calc(100% - var(--fade-end)), rgb(0 0 0 / 0.25));
  mask-image: linear-gradient(to right, rgb(0 0 0 / 0.25), #000 var(--fade-start), #000 calc(100% - var(--fade-end)), rgb(0 0 0 / 0.25));
}

.portfolio-filters ul.has-fade-start {
  --fade-start: var(--filter-fade);
}

.portfolio-filters ul.has-fade-end {
  --fade-end: var(--filter-fade);
}

.portfolio-filters ul::-webkit-scrollbar {
  display: none;
}

.portfolio-filters li {
  flex: 0 0 auto;
}

.portfolio-filter {
  padding: 0.25rem 0 0.35rem;
  white-space: nowrap;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-purple);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.portfolio-filter:hover,
.portfolio-filter[aria-pressed="true"] {
  border-bottom-color: var(--color-gold);
  color: var(--color-gold);
}

.portfolio-filter:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
}

.portfolio-feed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--space-5);
  row-gap: var(--space-6);
}

.portfolio-item,
.portfolio-pair {
  min-width: 0;
}

.portfolio-item[hidden] {
  display: none;
}

.portfolio-photo {
  border-radius: 0;
  background: #eee8e0;
}

.portfolio-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.portfolio-photo--portrait img {
  aspect-ratio: 3 / 4;
}

.portfolio-photo:hover img {
  opacity: 0.94;
}

.portfolio-item--featured > .portfolio-photo {
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: 4 / 3;
  align-self: start;
}

.portfolio-item--featured > .portfolio-photo img,
.portfolio-supporting .portfolio-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.portfolio-supporting {
  display: grid;
  grid-template-rows: repeat(2, auto);
  align-content: start;
  gap: var(--space-1);
}

.portfolio-supporting .portfolio-photo {
  aspect-ratio: 1 / 1;
}

.portfolio-caption {
  padding-top: var(--space-2);
}

.portfolio-caption h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: var(--font-weight-emphasis);
}

.portfolio-category {
  margin-bottom: 0.25rem;
  font-size: 0.7rem;
}

.portfolio-summary {
  max-width: 15rem;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.portfolio-summary p {
  margin-bottom: var(--space-1);
}

.portfolio-item--featured .portfolio-summary {
  max-width: 34rem;
  margin-top: var(--space-1);
}

.portfolio-item--standard .portfolio-summary {
  margin-top: var(--space-1);
}

.portfolio-project-link {
  color: var(--color-purple);
  font-weight: var(--font-weight-emphasis);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.portfolio-project-link[aria-disabled="true"] {
  color: var(--color-muted);
  cursor: default;
  text-decoration-style: dotted;
}

.portfolio-pair {
  display: contents;
}

.portfolio-item--featured {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
  column-gap: var(--space-1);
}

.portfolio-item--featured > .portfolio-supporting {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}

.portfolio-item--featured > .portfolio-caption {
  grid-column: 1;
  grid-row: 2;
  padding-top: var(--space-3);
}

.portfolio-item--standard {
  width: 100%;
}

.site-footer {
  background: var(--color-purple-dark);
  color: var(--color-background);
}

.site-footer .container {
  padding-block: var(--space-4);
}

.site-footer .container::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: var(--space-4);
  background: rgba(214, 180, 127, 0.35);
}

.site-footer p {
  margin: 0;
}

.footer-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  padding-bottom: var(--space-6);
}

/* Mirrors the header brand lockup (.site-brand-mark / .site-brand-name) in gold */
.footer-details .footer-brand {
  color: var(--color-gold-on-dark);
  font-size: 2rem;
  font-weight: var(--font-weight-emphasis);
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.footer-details .footer-name {
  margin-bottom: var(--space-5);
  color: var(--color-gold-on-dark);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer-details p + p:not(.footer-name) {
  margin-top: var(--space-1);
}

.footer-connect h2 {
  margin: 0 0 var(--space-3);
  color: var(--color-gold-on-dark);
  font-size: 0.9rem;
  font-weight: var(--font-weight-emphasis);
  letter-spacing: 0.12em;
}

.footer-connect ul {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: var(--color-background);
  text-decoration: none;
  text-underline-offset: 0.25em;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-gold-on-dark);
  text-decoration: underline;
}

.site-footer a:focus-visible {
  outline-color: var(--color-gold-on-dark);
}

.footer-details a,
.footer-connect li a,
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.footer-details a,
.footer-connect li a {
  gap: var(--space-2);
}

.footer-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

img.footer-icon {
  border-radius: 4px;
}

.footer-bottom a {
  color: var(--color-gold-on-dark);
  text-decoration: underline;
}

.site-footer .footer-line-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-gold-on-dark);
  border-radius: 4px;
  color: var(--color-gold-on-dark);
  font-weight: var(--font-weight-emphasis);
}

.site-footer .footer-line-button:hover {
  background: var(--color-gold-on-dark);
  color: var(--color-footer-background);
  text-decoration: none;
}

.footer-bottom {
  padding-top: var(--space-4);
  border-top: 1px solid rgba(251, 250, 247, 0.25);
  font-size: 0.875rem;
  text-align: center;
}

.footer-policy {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.footer-separator {
  margin-inline: var(--space-2);
  color: var(--color-gold-on-dark);
}

@media (max-width: 64rem) {
  .project-gallery {
    column-count: 2;
  }
}

@media (max-width: 44rem) {
  .project-gallery {
    column-count: 1;
  }

  .portfolio-intro {
    margin-bottom: var(--space-6);
  }

  .portfolio-feed {
    grid-template-columns: 1fr;
    row-gap: calc(var(--space-6) + var(--space-3));
  }

  .portfolio-item--featured {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .portfolio-photo img {
    aspect-ratio: auto;
  }

  .portfolio-item--featured > .portfolio-supporting {
    grid-column: 1;
    grid-row: 2;
    margin-top: var(--space-2);
  }

  .portfolio-item--featured > .portfolio-caption {
    grid-row: 3;
  }

  .portfolio-supporting {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: var(--space-2);
  }

  .portfolio-caption {
    padding-top: var(--space-3);
  }

  .portfolio-caption h2 {
    font-size: 1.25rem;
  }

  .portfolio-category {
    font-size: 0.75rem;
  }

  .portfolio-summary {
    margin-top: var(--space-2);
    font-size: 0.95rem;
  }

  .portfolio-pair {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .portfolio-pair .portfolio-item:last-child {
    margin-top: 0;
  }

  .header-inner {
    flex-wrap: wrap;
    gap: 0;
  }

  .has-js .menu-toggle {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--color-purple-secondary);
    cursor: pointer;
  }

  .menu-toggle:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
  }

  .menu-icon {
    display: grid;
    gap: 4px;
  }

  .menu-icon span {
    width: 1.25rem;
    height: 3px;
    border-radius: 1px;
    background: currentColor;
  }

  .site-nav {
    width: 100%;
  }

  .has-js .site-nav {
    display: none;
  }

  .has-js .site-nav.is-open {
    display: block;
  }

  .site-nav ul {
    display: block;
    margin-top: var(--space-3);
    border-top: 1px solid var(--color-border);
  }

  .site-nav li + li {
    border-top: 1px solid var(--color-border);
  }

  .site-nav a {
    display: block;
    padding: var(--space-2);
    border-bottom: 0;
    border-left: 3px solid transparent;
  }

  .site-nav a:hover,
  .site-nav a[aria-current="page"],
  .site-nav a[aria-current="location"] {
    border-left-color: var(--color-gold);
  }

  .site-nav a[aria-current="page"],
  .site-nav a[aria-current="location"] {
    border-left-color: var(--color-purple-secondary);
  }

  .has-submenu > a::after {
    display: none;
  }

  /* Subpages are as important as top-level pages: same row style, grouped only by the indent. */
  .site-nav .submenu {
    display: block;
    position: static;
    min-width: 0;
    margin: 0 0 0 var(--space-2);
    padding: 0;
    border: 0;
    border-top: 1px solid var(--color-border);
    background: none;
    transform: none;
  }

  .submenu a {
    padding: var(--space-2);
    font-size: 0.95rem;
    white-space: normal;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .footer-separator {
    display: none;
  }
}

/* Service process section */
.process {
  padding-block: var(--space-6);
  background: #f5f2f7;
  color: var(--color-muted);
}

.process-eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-gold);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.process h2 {
  margin: 0 0 var(--space-3);
  color: var(--color-purple-dark);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  white-space: normal;
}

.process-intro {
  max-width: 36rem;
  margin: 0;
}

.process-steps {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.process-step {
  padding-left: var(--space-4);
  border-left: 1px solid rgba(163, 107, 25, 0.3);
}

.process-step h3 {
  margin: 0 0 0.5rem;
  color: var(--color-purple-dark);
  font-size: 1rem;
  font-weight: var(--font-weight-emphasis);
  line-height: 1.4;
}

.process-number {
  color: var(--color-gold);
}

.process-step p {
  margin: 0;
  font-size: 0.9rem;
}

@media (min-width: 64rem) {
  .process {
    padding-block: 5.5rem;
  }

  .process-steps {
    margin-top: 3.5rem;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }

  .process-step {
    position: relative;
    padding: var(--space-5) var(--space-4) 0 0;
    border-left: 0;
    border-top: 1px solid rgba(163, 107, 25, 0.3);
  }

  .process-step::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-gold);
  }
}

/* Contact CTA section */
.cta {
  padding-block: var(--space-6);
  text-align: center;
}

.cta h2 {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  white-space: normal;
}

.cta-text {
  max-width: 36rem;
  margin: 0 auto;
  color: var(--color-muted);
}

.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Panel variant: the CTA content sits in a light purple box, like the testimonial card */
.cta--panel {
  background: var(--color-surface);
}

.cta-panel {
  padding: var(--space-6) var(--space-4);
  background: var(--color-background-alt);
}

.cta--panel h2 {
  font-weight: var(--font-weight-emphasis);
}

@media (min-width: 64rem) {
  .cta-panel {
    padding-inline: var(--space-6);
  }
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding-inline: var(--space-5);
  border: 1px solid var(--color-purple);
  border-radius: 4px;
  font-weight: var(--font-weight-emphasis);
  text-decoration: none;
}

.cta-button svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.cta-line-icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
}

.cta-button--primary {
  background: var(--color-purple);
  color: #fff;
}

.cta-button--primary:hover {
  background: var(--color-purple-dark);
}

.cta-button--secondary {
  color: var(--color-purple);
}

.cta-button--secondary:hover {
  background: var(--color-purple);
  color: #fff;
}

@media (min-width: 44rem) {
  .cta-actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* Floating contact button */
.contact-fab {
  display: none;
}

.has-js .contact-fab {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.contact-fab-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  visibility: hidden;
  transition: visibility 0s linear 0.15s;
}

.contact-fab.is-open .contact-fab-list {
  visibility: visible;
  transition-delay: 0s;
}

.contact-fab-list li {
  opacity: 0;
  transform: translateY(1.5rem) scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.contact-fab.is-open .contact-fab-list li {
  opacity: 1;
  transform: none;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.contact-fab.is-open .contact-fab-list li:nth-last-child(2) { transition-delay: 0.05s; }
.contact-fab.is-open .contact-fab-list li:nth-last-child(3) { transition-delay: 0.1s; }
.contact-fab.is-open .contact-fab-list li:nth-last-child(4) { transition-delay: 0.15s; }

.contact-fab-toggle,
.contact-fab-item {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
}

.contact-fab-toggle {
  background: var(--color-purple-secondary);
  cursor: pointer;
}

.contact-fab-toggle:hover {
  background: var(--color-purple-dark);
}

.contact-fab-item {
  text-decoration: none;
}

.contact-fab-item:hover {
  filter: brightness(0.92);
}

.contact-fab-toggle:focus-visible,
.contact-fab-item:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.contact-fab-item img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.contact-fab svg {
  width: 1.75rem;
  height: 1.75rem;
}

.contact-fab-icon-close,
.contact-fab.is-open .contact-fab-icon-open {
  display: none;
}

.contact-fab.is-open .contact-fab-icon-close {
  display: block;
}

/* Placeholder colours: replace with official brand colours */
.contact-fab-line { background: #06c755; }
.contact-fab-phone { background: var(--color-gold); }
.contact-fab-email { background: var(--color-gold); }
.contact-fab-facebook { background: #1877f2; }

.site-footer .container {
  padding-bottom: calc(var(--space-4) + 3.5rem);
}

@media (min-width: 64rem) {
  .has-js .contact-fab {
    right: var(--space-5);
    bottom: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-fab-list,
  .contact-fab-list li,
  .contact-fab.is-open .contact-fab-list li {
    transition: none;
  }
}

/* Split hero: text on the left (45%), photo on the right, attached to the header. */
.split-hero {
  display: grid;
}

.split-hero-text {
  padding: var(--space-5) var(--page-gutter);
  background: var(--color-purple);
  color: #ffffff;
}

.split-hero-eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-gold-on-dark);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.split-hero-text h1 {
  margin: 0 0 var(--space-2);
  color: #ffffff;
  font-size: clamp(1.5rem, 5.5vw, 2rem);
}

.split-hero-intro {
  margin: 0;
  color: #ffffff;
  font-size: 0.9375rem;
}

/* On mobile the photo comes first, directly under the header. */
.split-hero-media {
  order: -1;
}

.split-hero-media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 48rem) {
  .split-hero {
    grid-template-columns: minmax(45%, 1fr) auto;
    /* Match the .container content box so the hero lines up with the rest of the page. */
    width: calc(100% - 2 * var(--page-gutter));
    max-width: calc(var(--content-width) - 2 * var(--page-gutter));
    margin-inline: auto;
  }

  .split-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline: var(--space-5);
  }

  .split-hero-media {
    order: 0;
    display: flex;
    justify-content: flex-end;
  }

  /* The photo keeps its 4:3 ratio at 24rem tall, so the purple text panel takes the remaining width with no gap.
     If the column is narrower than the photo, the photo is cropped slightly instead of leaving a gap. */
  .split-hero-media img {
    width: auto;
    height: 24rem;
    max-width: 100%;
    object-fit: cover;
  }
}

/* Trust strip under the white split hero: add the top rule to match the bottom one. */
.split-hero + .trust-strip {
  border-top: 1px solid var(--color-border);
}

/* Home product category grid: each item is a link card to a product page.
   Single column on mobile, editorial mosaic from 44rem.
   Images are cropped to fixed proportions with object-fit so the grid stays aligned. */
.category-grid {
  margin-top: var(--space-5);
}

.category-grid ul {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.category-grid-item {
  position: relative;
}

.category-card {
  position: relative;
  display: block;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Curtains is the main category: taller on mobile. */
.category-grid-item--main .category-card img {
  aspect-ratio: 1 / 1;
}

/* Two-line label over the bottom of the image, on a dark gradient for legibility. */
.category-card-text {
  position: absolute;
  inset: auto 0 0;
  display: block;
  padding: var(--space-5) var(--space-3) var(--space-3);
  background: linear-gradient(to top, rgb(0 0 0 / 0.65), rgb(0 0 0 / 0));
}

.category-card-eyebrow,
.category-card-name {
  display: block;
}

.category-card-eyebrow {
  margin-bottom: 0.15rem;
  color: var(--color-gold-on-dark);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.category-card-name {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.3;
}

.category-grid-item--main .category-card-name {
  font-size: 1.35rem;
}

.category-card-arrow {
  display: inline-block;
  margin-left: 0.25em;
  transition: transform 0.3s ease;
}

/* Hover and keyboard focus lift the whole card slightly, with a soft shadow beneath it. */
.category-card:focus-visible {
  box-shadow: 0 16px 32px rgb(0 0 0 / 0.24);
  transform: translateY(-8px);
}

.category-card:focus-visible .category-card-arrow {
  transform: translateX(0.25rem);
}

@media (hover: hover) {
  .category-card:hover {
    box-shadow: 0 16px 32px rgb(0 0 0 / 0.24);
    transform: translateY(-8px);
  }

  .category-card:hover .category-card-arrow {
    transform: translateX(0.25rem);
  }
}

/* Reduced motion: keep the shadow as the cue, but don't move anything. */
@media (prefers-reduced-motion: reduce) {
  .category-card,
  .category-card-arrow {
    transition: none;
  }

  .category-card:hover,
  .category-card:focus-visible,
  .category-card:hover .category-card-arrow,
  .category-card:focus-visible .category-card-arrow {
    transform: none;
  }
}

@media (min-width: 44rem) {
  /* Curtains takes the left 5/8 of the top rows, Blinds and Window Film stack in the right 3/8,
     and Wallpaper and Custom Furniture split the bottom row. The list's aspect ratio sets the
     cell shapes (Curtains about 5:4, side images 3:2, bottom images about 2:1).
     Compact preview, capped a little smaller than the curtains page mini gallery. */
  .category-grid ul {
    max-width: 740px;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 25fr)) minmax(0, 24fr);
    aspect-ratio: 100 / 74;
  }

  .category-grid-item {
    grid-column: span 3;
  }

  .category-grid-item--main {
    grid-column: span 5;
    grid-row: span 2;
  }

  .category-grid-item--wide {
    grid-column: span 4;
  }

  /* Fill the cell without contributing the image's intrinsic size, so the grid decides the shapes. */
  .category-card {
    position: absolute;
    inset: 0;
  }

  .category-card img,
  .category-grid-item--main .category-card img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* Home "Why choose us" section: full-width light purple band below the category grid. */
.why-us-section {
  padding-block: var(--space-6);
  background: var(--color-background-alt);
}

/* Numbered reasons: no cards or icons, just thin divider lines between items.
   Single column with horizontal dividers on mobile, 2 × 2 grid from 44rem. */
.why-us-list {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.why-us-item {
  padding-block: var(--space-4);
}

.why-us-item:first-child {
  padding-top: 0;
}

.why-us-item:last-child {
  padding-bottom: 0;
}

.why-us-item + .why-us-item {
  border-top: 1px solid var(--color-border);
}

/* Number circle sits on the same row as the heading, styled like .service-number. */
.why-us-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.why-us-number {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-purple-secondary);
  color: var(--color-surface);
  font-size: 0.8rem;
  font-weight: var(--font-weight-emphasis);
  line-height: 1;
}

.why-us-item h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: var(--font-weight-emphasis);
  letter-spacing: 0;
}

/* Indent the description to line up with the heading text (circle width + gap). */
.why-us-item p {
  max-width: 32rem;
  margin: 0;
  padding-left: calc(2rem + var(--space-2));
  color: var(--color-muted);
}

@media (min-width: 44rem) {
  .why-us-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-5);
  }

  /* Reset the mobile dividers and padding, then draw a vertical line between the columns
     and a horizontal line between the rows. */
  .why-us-item,
  .why-us-item:first-child,
  .why-us-item:last-child {
    padding: var(--space-5) var(--space-5) var(--space-5) 0;
  }

  .why-us-item + .why-us-item {
    border-top: 0;
  }

  .why-us-item:nth-child(even) {
    padding-right: 0;
    padding-left: var(--space-5);
    border-left: 1px solid var(--color-border);
  }

  .why-us-item:nth-child(-n + 2) {
    padding-top: 0;
  }

  .why-us-item:nth-child(n + 3) {
    border-top: 1px solid var(--color-border);
  }

  .why-us-item:nth-last-child(-n + 2) {
    padding-bottom: 0;
  }
}

/* Home "Start here" section: white band after the light purple "Why DDD" section. */
.start-section {
  padding-block: var(--space-6);
}

/* Keep the bottom spacing equal to the top: no paragraph margin after the last item. */
.start-section .container > :last-child {
  margin-bottom: 0;
}

/* Left-aligned CTA buttons (shared .cta-button styles): stacked on mobile, side by side from 44rem. */
.start-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

@media (min-width: 44rem) {
  .start-actions {
    flex-direction: row;
  }
}