/* ============================================================
   AAI — EDITORIAL PAGE LAYER
   ------------------------------------------------------------
   Loaded last on every interior page. The per-page stylesheets
   own the *layout* (grids, timelines, form structures); this
   file owns the *design language* — squaring corners, replacing
   drop shadows with hairlines, moving headings onto the display
   face and standardising the masthead, so all ten pages read as
   one system rather than nine templates.
   ============================================================ */

/* ------------------------------------------------------------
   Container parity — projects.css and blog.css each redefine
   .container; bring them back onto the global measure so their
   copy lines up with the header and footer.
   ------------------------------------------------------------ */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Shared inset for full-bleed sections that hold their own padding. */
.about-intro,
.about-story,
.about-values,
.about-timeline,
.about-process,
.about-team,
.about-testimonials,
.about-cta,
.services-hero,
.services-index,
.more-services,
.services-cta,
.service-section,
.contact-offices,
.contact-process,
.contact-faq {
  padding-inline: max(
    var(--gutter),
    calc((100% - var(--container)) / 2 + var(--gutter))
  ) !important;
}

.story-grid,
.values-grid,
.team-grid,
.timeline-container,
.service-index-grid,
.contact-office-grid,
.contact-process-grid,
.contact-faq-list {
  max-width: none;
}

/* ============================================================
   1. PAGE MASTHEAD
   ============================================================ */

.about-page,
.services-page {
  padding-top: 0;
}

/* --- Group A: full-bleed mastheads (direct page-level sections) --- */
.about-intro,
.services-hero,
.blog-page .header,
.projects-page .header {
  position: relative;
  background: hsl(var(--background));
  background-image: none;
  padding-block: clamp(9rem, 16vh, 12rem) clamp(3.5rem, 7vw, 6rem);
  padding-inline: max(
    var(--gutter),
    calc((100% - var(--container)) / 2 + var(--gutter))
  ) !important;
  max-width: none;
  margin: 0;
  border-bottom: 1px solid hsl(var(--border));
  text-align: left;
  overflow: hidden;
}

/* --- Group B: mastheads nested inside a padded page container --- */
.products-hero,
.wishlist-hero,
.booking-hero,
.feedback-page-hero,
.contact-page-hero,
.contact-hero {
  position: relative;
  background: none;
  background-image: none;
  max-width: none;
  margin: 0 0 clamp(3rem, 6vw, 4.5rem);
  padding: 0 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid hsl(var(--border));
  text-align: left;
  overflow: visible;
}

/* Those containers own the top offset that clears the fixed header. */
.products-container,
.wishlist-container,
.booking-container,
.feedback-page-container,
.contact-page-container {
  padding-block: clamp(9rem, 16vh, 12rem) var(--section-y);
  padding-inline: var(--gutter);
}

.products-container,
.wishlist-container {
  max-width: var(--container);
}

/* Faint brass arc anchored in the corner — a quiet, recurring mark. */
.about-intro::after,
.services-hero::after,
.blog-page .header::after,
.projects-page .header::after {
  content: "";
  position: absolute;
  right: -6%;
  bottom: -55%;
  width: 30vw;
  max-width: 400px;
  aspect-ratio: 1;
  border: 1px solid hsl(var(--accent) / 0.18);
  border-radius: 50%;
  pointer-events: none;
}

.about-intro > *,
.services-hero > *,
.blog-page .header > *,
.projects-page .header > * {
  position: relative;
  z-index: 1;
}

.about-intro h1,
.services-hero h1,
.blog-page .header-title,
.projects-page .header-title {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: hsl(var(--foreground));
  margin: 0 0 var(--space-6);
  max-width: 17ch;
  text-align: left;
}

/* Several page stylesheets centre their <h1> with flex; the masthead
   is left-aligned throughout. */
.products-hero h1,
.wishlist-hero h1,
.booking-hero h1,
.feedback-page-hero h1,
.contact-page-hero h1,
.contact-hero h1 {
  justify-content: flex-start;
}

/* Container-nested mastheads run one step smaller — they sit inside a
   narrower measure, so step-5 would crowd the column. */
.products-hero h1,
.wishlist-hero h1,
.booking-hero h1,
.feedback-page-hero h1,
.contact-page-hero h1,
.contact-hero h1 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: hsl(var(--foreground));
  margin: 0 0 var(--space-6);
  max-width: 18ch;
  text-align: left;
}

.about-intro > p,
.services-hero > p,
.products-hero > p,
.wishlist-hero > p,
.booking-hero > p,
.feedback-page-hero > p,
.contact-page-hero > p,
.contact-hero > p,
.blog-page .header-subtitle,
.projects-page .header-subtitle {
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.65;
  color: hsl(var(--muted-foreground));
  max-width: 54ch;
  margin: 0 0 var(--space-6);
  text-align: left;
}

/* --- Masthead entrance ---
   Pure CSS so it runs at first paint. The <h1> here is the LCP element
   on every interior page, so it must never wait on JavaScript. */
@keyframes mastheadRise {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mastheadWipe {
  from {
    clip-path: inset(0 0 108% 0);
  }
  to {
    clip-path: inset(-25% 0 -25% 0);
  }
}

.about-intro > *,
.services-hero > *,
.products-hero > *,
.wishlist-hero > *,
.booking-hero > *,
.feedback-page-hero > *,
.contact-page-hero > *,
.contact-hero > *,
.blog-page .header > *,
.projects-page .header > * {
  animation: mastheadRise 620ms var(--ease-out) both;
}

.about-intro h1,
.services-hero h1,
.products-hero h1,
.wishlist-hero h1,
.booking-hero h1,
.feedback-page-hero h1,
.contact-page-hero h1,
.contact-hero h1,
.blog-page .header-title,
.projects-page .header-title {
  animation: mastheadWipe 860ms var(--ease-out) 80ms both;
}

.about-intro > p,
.services-hero > p,
.products-hero > p,
.wishlist-hero > p,
.booking-hero > p,
.feedback-page-hero > p,
.contact-page-hero > p,
.contact-hero > p,
.blog-page .header-subtitle,
.projects-page .header-subtitle {
  animation-delay: 200ms;
}

.header-location,
.contact-trust {
  animation-delay: 300ms;
}

@media (prefers-reduced-motion: reduce) {
  .about-intro > *,
  .services-hero > *,
  .products-hero > *,
  .wishlist-hero > *,
  .booking-hero > *,
  .feedback-page-hero > *,
  .contact-page-hero > *,
  .contact-hero > *,
  .blog-page .header > *,
  .projects-page .header > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* Location strapline under the projects / blog mastheads. */
.header-location {
  justify-content: flex-start;
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: hsl(var(--accent));
}

.header-location svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

/* ============================================================
   2. BADGES → BRASS EYEBROWS
   ============================================================ */

.about-intro-badge,
.services-hero-badge,
.service-eyebrow,
.auto-fill-badge,
.product-category,
.wishlist-category,
.modal-category,
.project-type {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none !important;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: hsl(var(--accent)) !important;
}

.about-intro-badge::before,
.services-hero-badge::before,
.service-eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: hsl(var(--accent));
  flex: none;
}

.about-intro-badge svg,
.services-hero-badge svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

/* ============================================================
   3. SECTION HEADERS
   ============================================================ */

.section-header,
.contact-offices .section-header,
.contact-process .section-header,
.contact-faq .section-header {
  text-align: left;
  max-width: var(--measure);
  margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
}

.section-header h2,
.contact-offices .section-header h2,
.contact-process .section-header h2,
.contact-faq .section-header h2,
.story-content h2,
.contact-col-heading {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: hsl(var(--foreground));
  margin-bottom: var(--space-4);
}

.section-header p,
.contact-offices .section-header p,
.contact-process .section-header p,
.contact-faq .section-header p,
.contact-col-sub {
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.7;
  color: hsl(var(--muted-foreground));
  max-width: 58ch;
  margin: 0;
}

/* ============================================================
   4. CARDS → HAIRLINE CELLS
   ------------------------------------------------------------
   Every surface loses its radius and drop shadow. Depth comes
   from the hairline and, on hover, a single soft lift.
   ============================================================ */

.value-card,
.team-member,
.timeline-content,
.gallery-card,
.service-index-card,
.blog-card,
.project-card,
.product-card,
.wishlist-card,
.contact-office-card,
.contact-channel,
.contact-faq-item,
.contact-aside-inner,
.contact-page-form,
.booking-form,
.feedback-page-form,
.modal-content,
.empty-state,
.blog-empty {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  transition: border-color var(--dur-base) ease,
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.value-card:hover,
.team-member:hover,
.timeline-content:hover,
.gallery-card:hover,
.service-index-card:hover,
.blog-card:hover,
.project-card:hover,
.product-card:hover,
.wishlist-card:hover,
.contact-office-card:hover,
.contact-channel:hover {
  transform: translateY(-4px);
  border-color: hsl(var(--hairline)) !important;
  box-shadow: var(--shadow-lift) !important;
}

/* Kill the decorative gradient bars that ran across card tops. */
.value-card::before,
.service-index-card::before,
.contact-office-card::before,
.gallery-card::before {
  display: none !important;
}

/* Card headings move to the display face. */
.value-card h3,
.team-member-info h3,
.timeline-content h3,
.service-index-card h3,
.gallery-card h3,
.blog-card-title,
.project-title,
.product-name,
.wishlist-name,
.modal-name,
.contact-office-card h3,
.contact-channel h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  color: hsl(var(--foreground));
}

.blog-card-title,
.project-title,
.modal-name {
  font-size: var(--step-2);
  font-weight: 300;
}

.product-name,
.wishlist-name {
  font-size: var(--step-1);
}

/* Images inside cards square off with the frame. */
.blog-card-image,
.project-image,
.product-image,
.wishlist-image,
.wishlist-image-wrapper,
.team-member-image,
.story-image,
.service-img,
.modal-image,
.gallery-card img {
  border-radius: 0 !important;
}

.story-image,
.service-img {
  border: 1px solid hsl(var(--border));
  box-shadow: none !important;
  overflow: hidden; /* clips the parallax overscale */
}

/* ============================================================
   5. ICON TILES → PLAIN BRASS GLYPHS
   ============================================================ */

.value-icon,
.service-icon,
.service-index-icon,
.process-icon,
.contact-channel-icon {
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: hsl(var(--accent)) !important;
  display: block;
  margin-bottom: var(--space-6);
  box-shadow: none !important;
}

.value-icon svg,
.service-icon svg,
.service-index-icon svg,
.process-icon svg,
.contact-channel-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.25;
}

/* ============================================================
   6. SECTION RHYTHM & GROUNDS
   ============================================================ */

.about-story,
.about-values,
.about-timeline,
.about-process,
.about-team,
.about-testimonials,
.services-index,
.more-services,
.contact-offices,
.contact-process,
.contact-faq {
  padding-block: var(--section-y) !important;
}

.about-values,
.about-team,
.more-services,
.contact-process {
  background: hsl(var(--muted));
}

.about-story,
.about-timeline,
.about-testimonials,
.services-index,
.contact-offices,
.contact-faq {
  background: hsl(var(--background));
}

/* ============================================================
   7. STATS & FIGURES
   ============================================================ */

.story-stat h3,
.stat-item h4 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 300;
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.story-stat p,
.stat-item p {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.story-content .highlight {
  color: hsl(var(--accent));
  font-weight: 400;
}

/* ============================================================
   8. TIMELINE
   ============================================================ */

.timeline-container::before {
  width: 1px;
  background: hsl(var(--border)) !important;
}

.timeline-item::before {
  width: 9px;
  height: 9px;
  border-width: 0;
  border-radius: 50%;
  background: hsl(var(--accent)) !important;
  box-shadow: 0 0 0 6px hsl(var(--background)) !important;
}

.timeline-year {
  background: none !important;
  color: hsl(var(--accent)) !important;
  border: 1px solid hsl(var(--accent) / 0.4);
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-sans);
  font-size: var(--step--2) !important;
  font-weight: 500 !important;
  letter-spacing: var(--tracking-caps);
  padding: 0.625rem 1.25rem !important;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   9. TEAM
   ============================================================ */

.team-member-image img {
  filter: grayscale(1) saturate(0.9);
  transition: filter var(--dur-slow) ease, transform var(--dur-slow) var(--ease-out);
}

.team-member:hover .team-member-image img {
  filter: grayscale(0) saturate(0.94);
}

.team-member-info p {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--accent));
}

/* ============================================================
   10. FILTER TABS & CONTROLS
   ============================================================ */

.filter-tabs,
.products-controls,
.wishlist-controls,
.filters-group,
.controls-group {
  gap: 0.5rem;
}

/* Left-aligned to the container edge, like every other block. */
.filter-tabs {
  justify-content: flex-start !important;
  padding-inline: max(
    var(--gutter),
    calc((100% - var(--container)) / 2 + var(--gutter))
  ) !important;
  margin-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}

.filter-tab {
  border-radius: 0 !important;
  border: 1px solid hsl(var(--border)) !important;
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
  font-family: var(--font-sans);
  font-size: var(--step--2) !important;
  font-weight: 500 !important;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 0.75rem 1.25rem !important;
  box-shadow: none !important;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease;
}

.filter-tab:hover {
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--hairline)) !important;
}

.filter-tab.active {
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.search-input,
.filter-select,
.control-select {
  border-radius: 0 !important;
  border: 1px solid hsl(var(--input)) !important;
  background: hsl(var(--surface)) !important;
  color: hsl(var(--foreground));
  font-size: var(--step--1);
  box-shadow: none !important;
}

/* ============================================================
   11. FORMS
   ============================================================ */

.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea,
.form-group input,
.form-group select,
.form-group textarea,
.feedback-form-group input,
.feedback-form-group select,
.feedback-form-group textarea {
  border-radius: 0 !important;
  border: 1px solid hsl(var(--input)) !important;
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-size: var(--step-0);
  padding: 0.875rem 1rem;
  box-shadow: none !important;
  transition: border-color var(--dur-fast) ease;
}

.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.feedback-form-group input:focus,
.feedback-form-group select:focus,
.feedback-form-group textarea:focus {
  outline: none;
  border-color: hsl(var(--accent)) !important;
  box-shadow: none !important;
}

.contact-form-group label,
.form-group label,
.feedback-form-group label,
.contact-service-group-label,
.radio-group-label,
.feedback-rating-group-label {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.contact-fieldset-legend,
.fieldset-legend,
.feedback-fieldset-legend {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  letter-spacing: var(--tracking-tight);
  color: hsl(var(--foreground));
}

.contact-fieldset,
.form-fieldset,
.feedback-fieldset,
.contact-service-fieldset {
  border-radius: 0 !important;
  border: none;
  border-top: 1px solid hsl(var(--border));
  background: none !important;
  background-image: none !important;
  padding: var(--space-8) 0 0 !important;
  margin-bottom: var(--space-12) !important;
  box-shadow: none !important;
}

.contact-fieldset-legend,
.fieldset-legend,
.feedback-fieldset-legend {
  padding: 0 !important;
  margin-bottom: var(--space-6);
}

.fieldset-legend svg,
.contact-fieldset-legend svg,
.feedback-fieldset-legend svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.25;
  color: hsl(var(--accent));
}

.req {
  color: hsl(var(--accent));
}

/* Invalid fields.
   The form scripts already add .contact-error / .feedback-error / .error,
   but the generic input rule above sets the border with !important, which
   was silently overriding them — so an invalid field looked identical to a
   valid one and only the message underneath turned red. */
.contact-form-group input.contact-error,
.contact-form-group select.contact-error,
.contact-form-group textarea.contact-error,
.feedback-form-group input.feedback-error,
.feedback-form-group select.feedback-error,
.feedback-form-group textarea.feedback-error,
.form-group input.error,
.form-group select.error,
.form-group textarea.error,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: hsl(var(--destructive)) !important;
  background: hsl(var(--destructive) / 0.03) !important;
}

.contact-form-group input.contact-error:focus,
.feedback-form-group input.feedback-error:focus,
.form-group input.error:focus,
input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
  border-color: hsl(var(--destructive)) !important;
  outline: 2px solid hsl(var(--destructive) / 0.35);
  outline-offset: 1px;
}

/* Error text sits directly under its field and is announced via role="alert". */
.contact-error-msg,
.error-message,
.feedback-error-msg {
  display: block;
  margin-top: 0.375rem;
  min-height: 0;
}

.contact-error-msg,
.error-message,
.feedback-error-msg {
  color: hsl(var(--destructive));
  font-size: var(--step--1);
}

.contact-helper-text {
  color: hsl(var(--muted-foreground));
  font-size: var(--step--1);
}

/* Radio / rating / checkbox chips */
.radio-button,
.contact-radio-button,
.feedback-rating-button,
.feedback-checkbox-wrapper {
  border-radius: 0 !important;
  border: 1px solid hsl(var(--border)) !important;
  background: transparent !important;
  color: hsl(var(--foreground));
  font-size: var(--step--1);
  box-shadow: none !important;
  transition: border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.radio-button:hover,
.contact-radio-button:hover,
.feedback-rating-button:hover,
.feedback-checkbox-wrapper:hover {
  border-color: hsl(var(--accent)) !important;
}

input:checked + .radio-button,
input:checked + .contact-radio-button,
input:checked + .feedback-rating-button,
.radio-button.selected,
.contact-radio-button.selected,
.feedback-rating-button.selected {
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* Form buttons take the global button voice. */
.btn-submit,
.contact-btn-submit,
.feedback-btn-submit,
.cta-btn-primary,
.service-cta-btn,
.btn-view-detail,
.btn-quick-view {
  border-radius: 0 !important;
  background: hsl(var(--primary)) !important;
  border: 1px solid hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  font-family: var(--font-sans);
  font-size: var(--step--2) !important;
  font-weight: 500 !important;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 1rem 1.75rem;
  box-shadow: none !important;
  transition: background-color var(--dur-base) ease,
    border-color var(--dur-base) ease;
}

.btn-submit:hover,
.contact-btn-submit:hover,
.feedback-btn-submit:hover,
.cta-btn-primary:hover,
.service-cta-btn:hover,
.btn-view-detail:hover,
.btn-quick-view:hover {
  background: hsl(var(--accent)) !important;
  border-color: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
  transform: none !important;
}

.btn-reset,
.contact-btn-reset,
.feedback-btn-reset,
.cta-btn-secondary,
.back-link {
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid hsl(var(--hairline)) !important;
  color: hsl(var(--foreground)) !important;
  font-family: var(--font-sans);
  font-size: var(--step--2) !important;
  font-weight: 500 !important;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 1rem 1.75rem;
  box-shadow: none !important;
}

.btn-reset:hover,
.contact-btn-reset:hover,
.feedback-btn-reset:hover,
.cta-btn-secondary:hover,
.back-link:hover {
  background: hsl(var(--foreground)) !important;
  border-color: hsl(var(--foreground)) !important;
  color: hsl(var(--background)) !important;
}

/* One primary action per card: "quick view" carries the ink fill,
   wishlist and remove stay as hairline secondaries. */
.btn-remove,
.btn-wishlist {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 1px solid hsl(var(--hairline)) !important;
  color: hsl(var(--foreground)) !important;
}

.btn-remove:hover,
.btn-wishlist:hover {
  background: hsl(var(--foreground)) !important;
  border-color: hsl(var(--foreground)) !important;
  color: hsl(var(--background)) !important;
}

.btn-wishlist.active,
.btn-wishlist[aria-pressed="true"] {
  background: hsl(var(--accent)) !important;
  border-color: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

/* Card-level actions sit in a tight column — ease the tracking so the
   labels stay on one line. */
.product-actions .btn-quick-view,
.product-actions .btn-wishlist,
.wishlist-actions .btn-view-detail,
.wishlist-actions .btn-remove {
  padding: 0.75rem 0.875rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  gap: 0.4rem;
}

.product-actions svg,
.wishlist-actions svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
  flex: none;
}

/* ============================================================
   12. CTA BANDS
   ============================================================ */

.about-cta,
.services-cta,
.projects-cta,
.blog-cta {
  background: hsl(var(--deep)) !important;
  background-image: none !important;
  color: hsl(var(--deep-foreground));
  padding-block: var(--section-y) !important;
  border: none;
}

.about-cta h2,
.services-cta h2,
.projects-cta h2,
.blog-cta h2,
.about-cta h3,
.projects-cta h3,
.blog-cta h3 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: hsl(var(--deep-foreground)) !important;
  max-width: 18ch;
}

.about-cta p,
.services-cta p,
.projects-cta p,
.blog-cta p {
  color: hsl(var(--deep-muted)) !important;
  font-size: var(--step-1);
  font-weight: 300;
  max-width: 52ch;
}

.about-cta .cta-btn-secondary,
.services-cta .btn-outline,
.projects-cta .btn-outline,
.blog-cta .btn-outline {
  color: hsl(var(--deep-foreground)) !important;
  border-color: hsl(var(--deep-foreground) / 0.35) !important;
}

.about-cta .cta-btn-secondary:hover,
.services-cta .btn-outline:hover,
.projects-cta .btn-outline:hover,
.blog-cta .btn-outline:hover {
  background: hsl(var(--deep-foreground)) !important;
  border-color: hsl(var(--deep-foreground)) !important;
  color: hsl(var(--deep)) !important;
}

.about-cta .cta-btn-primary,
.services-cta .btn-primary,
.projects-cta .btn-primary,
.blog-cta .btn-primary {
  background: hsl(var(--accent-soft)) !important;
  border-color: hsl(var(--accent-soft)) !important;
  color: hsl(var(--deep)) !important;
}

.about-cta .cta-btn-primary:hover,
.services-cta .btn-primary:hover,
.projects-cta .btn-primary:hover,
.blog-cta .btn-primary:hover {
  background: hsl(var(--deep-foreground)) !important;
  border-color: hsl(var(--deep-foreground)) !important;
}

/* ============================================================
   13. SERVICES — ALTERNATING SECTIONS
   ============================================================ */

.service-section {
  padding-block: var(--section-y) !important;
  border-bottom: 1px solid hsl(var(--border));
}

.service-lead {
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}

.service-text h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 300;
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}

.service-list-block h3 {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: hsl(var(--accent));
}

.service-lists li,
.contact-next-list li {
  font-size: var(--step-0);
  line-height: 1.8;
}

.contact-next-num {
  font-family: var(--font-display);
  background: none !important;
  border: 1px solid hsl(var(--accent) / 0.4);
  border-radius: 0 !important;
  color: hsl(var(--accent)) !important;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   14. BLOG & PROJECTS
   ============================================================ */

/* The category chip sits on top of the photograph, so it needs a solid
   ground rather than the transparent brass the other eyebrows use. */
.blog-card-category {
  border-radius: 0 !important;
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  font-family: var(--font-sans);
  font-size: var(--step--2) !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem !important;
  top: 0 !important;
  left: 0 !important;
}

/* Reserve the image box so a failed load cannot collapse the card. */
.blog-card-image {
  display: block;
  aspect-ratio: 3 / 2;
  background: hsl(var(--muted));
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  color: transparent; /* hide broken-image alt text */
}

/* Card titles and image wrappers are links, so the browser underlines
   them by default — which reads as a raw hyperlink and breaks the
   editorial styling. The whole card is the affordance; hover colour
   carries the interaction instead. */
.blog-card-title a,
.blog-card-image,
.project-title a,
.product-name a,
.wishlist-name a {
  text-decoration: none;
  color: inherit;
  transition: color var(--dur-fast) ease;
}

.blog-card-title a:hover,
.blog-card:hover .blog-card-title a {
  color: hsl(var(--accent));
}

.blog-card-title a:focus-visible {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 3px;
}

.blog-card-date,
.project-location,
.spec-label,
.blog-card-link {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.blog-card-link {
  color: hsl(var(--accent));
}

.blog-card-excerpt,
.project-description,
.product-desc,
.wishlist-desc,
.modal-desc {
  font-size: var(--step--1);
  line-height: 1.75;
  color: hsl(var(--muted-foreground));
}

.project-tag {
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground)) !important;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.375rem 0.75rem;
}

.spec-value {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums;
}

.project-feedback,
.feedback-author {
  border-radius: 0 !important;
  background: hsl(var(--muted)) !important;
  border-left: 2px solid hsl(var(--accent));
}

/* ============================================================
   15. PRODUCTS & WISHLIST
   ============================================================ */

.product-price,
.wishlist-price,
.modal-price {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  color: hsl(var(--foreground)) !important;
  font-variant-numeric: tabular-nums;
}

.wishlist-badge {
  border-radius: 0 !important;
  background: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
  font-variant-numeric: tabular-nums;
  font-size: var(--step--2);
}

.modal {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal-close {
  border-radius: 0 !important;
  border: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--surface)) !important;
  color: hsl(var(--foreground)) !important;
}

.empty-state,
.blog-empty {
  padding-block: clamp(4rem, 10vw, 7rem);
  text-align: center;
}

.empty-state h2,
.blog-empty h2,
.empty-state h3 {
  font-family: var(--font-display);
  font-weight: 300;
}

/* ============================================================
   16. TESTIMONIALS (about page)
   ============================================================ */

.about-testimonials .testimonial-card {
  background: transparent;
  border: none;
  border-top: 1px solid hsl(var(--border));
  padding: var(--space-8) 0;
}

.about-testimonials .testimonial-card:hover {
  transform: none;
  box-shadow: none !important;
  border-color: hsl(var(--border)) !important;
}

.about-testimonials .testimonial-text {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.45;
  color: hsl(var(--foreground));
}

.about-testimonials .author-image {
  display: none;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

/* Brass monogram in place of the stock silhouette avatar. */
.author-monogram {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--accent) / 0.45);
  color: hsl(var(--accent));
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
}

.about-testimonials .author-info h4,
.about-testimonials .author-info .author-name {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.stars {
  color: hsl(var(--accent));
}

.stars svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.25;
}

.stars .star-full {
  fill: currentColor;
}

.stars .star-empty {
  color: hsl(var(--muted-foreground) / 0.4);
  fill: none;
}

/* ============================================================
   17. CONTACT PAGE
   ============================================================ */

.contact-channel-primary,
.contact-channel-wa {
  border-left: 2px solid hsl(var(--accent));
}

.contact-channel-wa {
  border-left-color: #128c3e;
}

.contact-map {
  border-radius: 0 !important;
  border: 1px solid hsl(var(--border));
  overflow: hidden;
  filter: grayscale(0.35) contrast(1.02);
}

.contact-faq-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid hsl(var(--border));
}

.contact-faq-item:hover {
  transform: none;
  box-shadow: none !important;
}

.contact-faq-item summary,
.contact-faq-item h3 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
}

.contact-privacy {
  font-size: var(--step--1);
  color: hsl(var(--muted-foreground));
}

/* Trust strip: hairline-divided inline facts rather than tinted pills. */
.contact-trust {
  justify-content: flex-start !important;
  gap: 0 !important;
  border-top: 1px solid hsl(var(--border));
  padding-top: var(--space-6) !important;
  margin-top: var(--space-8);
}

.contact-trust li {
  background: none !important;
  border-radius: 0 !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: var(--step--2) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 1.25rem !important;
  border-right: 1px solid hsl(var(--border));
}

.contact-trust li:first-child {
  padding-left: 0 !important;
}

.contact-trust li:last-child {
  border-right: none;
}

.contact-trust svg {
  color: hsl(var(--accent));
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.contact-directions {
  color: hsl(var(--accent));
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   18. RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .about-intro h1,
  .services-hero h1,
  .products-hero h1,
  .wishlist-hero h1,
  .booking-hero h1,
  .feedback-page-hero h1,
  .contact-page-hero h1,
  .contact-hero h1,
  .blog-page .header-title,
  .projects-page .header-title {
    max-width: none;
  }

  .about-intro,
  .services-hero,
  .blog-page .header,
  .projects-page .header {
    padding-block: 8rem 3rem;
  }

  .products-container,
  .wishlist-container,
  .booking-container,
  .feedback-page-container,
  .contact-page-container {
    padding-top: 8rem;
  }

  .contact-trust li {
    border-right: none;
    padding-inline: 0 !important;
    width: 100%;
  }

  .filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }

  .filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .filter-tab {
    white-space: nowrap;
  }
}

/* Lock the page behind an open modal. Without this the background scrolls
   under the dialog, which on a phone looks like the modal is drifting. */
body.modal-open {
  overflow: hidden;
}

.modal-content:focus {
  outline: none;
}