/*UNIVERSAL CSS RESET*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/*BODY STYLING*/
body {
  background-color: #f3f3f3;
  font-family: Arial, Helvetica, sans-serif;
}

.visually-hidden {
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  position: absolute;
  white-space: nowrap;
}

/* =========================================
   PROFESSIONAL RESPONSIVE NAVIGATION
   ========================================= */

.site-header {
  background: rgba(243, 243, 243, 0.96);
  border-bottom: 1px solid rgba(11, 99, 105, 0.16);
  position: sticky;
  top: 0;
  z-index: 9999;
}

.site-nav {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1500px;
  min-height: 78px;
  padding: 0 28px;
  width: 100%;
}

.site-logo {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
}

.site-logo img {
  display: block;
  height: auto;
  max-height: 68px;
  width: clamp(132px, 10vw, 168px);
}

.nav-menu {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 18px;
  justify-content: space-between;
  min-width: 0;
}

.nav-primary-links {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.nav-primary-links a {
  border-radius: 4px;
  color: #263230;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 9px;
  text-decoration: none;
}

.nav-primary-links a:hover,
.nav-primary-links a:focus-visible,
.nav-dropdown summary:hover,
.nav-dropdown summary:focus-visible {
  background: rgba(11, 99, 105, 0.08);
  color: #0b6369;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown details {
  position: relative;
}

.nav-dropdown summary {
  border-radius: 4px;
  color: #263230;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  list-style: none;
  padding: 12px 24px 12px 9px;
  position: relative;
}

.nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown summary::after {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  height: 7px;
  position: absolute;
  right: 9px;
  top: 13px;
  transform: rotate(45deg);
  width: 7px;
}

.nav-dropdown-menu {
  background: #ffffff;
  border: 1px solid #d6ddd7;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(24, 35, 33, 0.16);
  display: grid;
  gap: 4px;
  min-width: 210px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 20;
}

.nav-dropdown-menu a {
  justify-content: flex-start;
  padding: 12px;
}

.nav-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.nav-socials {
  align-items: center;
  display: flex;
  gap: 8px;
}

.nav-socials a {
  align-items: center;
  border: 1px solid #d6ddd7;
  border-radius: 50%;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  transition:
    border-color 160ms ease,
    transform 160ms ease;
  width: 34px;
}

.nav-socials a:hover,
.nav-socials a:focus-visible {
  border-color: #0b6369;
  transform: translateY(-1px);
}

.nav-socials .icons {
  display: block;
  margin: 0;
  width: 18px;
}

.nav-phone,
.nav-main-site {
  color: #263230;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nav-main-site {
  border: 1px solid #cfd8d2;
  border-radius: 4px;
  padding: 10px 14px;
}

.nav-phone:hover,
.nav-main-site:hover,
.nav-phone:focus-visible,
.nav-main-site:focus-visible {
  border-color: #0b6369;
  color: #0b6369;
}

.nav-cta {
  border-radius: 4px;
  padding: 10px 15px;
  white-space: nowrap;
}

.nav-toggle {
  align-items: center;
  background: #ffffff;
  border: 1px solid #cfd8d2;
  border-radius: 4px;
  display: none;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 44px;
}

.nav-toggle-line {
  background: #182321;
  border-radius: 999px;
  display: block;
  height: 2px;
  position: absolute;
  transition:
    transform 180ms ease,
    opacity 180ms ease;
  width: 20px;
}

.nav-toggle-line:nth-child(1) {
  transform: translateY(-7px);
}

.nav-toggle-line:nth-child(3) {
  transform: translateY(7px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1) {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(3) {
  transform: rotate(-45deg);
}

@media (min-width: 1181px) and (max-width: 1320px) {
  .nav-socials {
    display: none;
  }
}

@media (max-width: 1180px) {
  body.nav-open {
    overflow: hidden;
  }

  .site-nav {
    min-height: 74px;
    padding: 0 20px;
    position: relative;
  }

  .nav-toggle {
    display: inline-flex;
    position: relative;
  }

  .nav-menu {
    background: #f3f3f3;
    border: 1px solid rgba(11, 99, 105, 0.16);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 22px 45px rgba(24, 35, 33, 0.16);
    display: none;
    gap: 22px;
    left: 14px;
    padding: 22px;
    position: absolute;
    right: 14px;
    top: 100%;
  }

  .nav-menu.is-open {
    display: grid;
  }

  .nav-primary-links {
    align-items: stretch;
    display: grid;
    gap: 4px;
    justify-content: stretch;
    white-space: normal;
  }

  .nav-primary-links a,
  .nav-dropdown summary {
    font-size: 16px;
    justify-content: space-between;
    padding: 14px 12px;
  }

  .nav-dropdown summary::after {
    right: 14px;
    top: 15px;
  }

  .nav-dropdown-menu {
    background: transparent;
    border: 0;
    box-shadow: none;
    gap: 2px;
    min-width: 0;
    padding: 4px 0 4px 14px;
    position: static;
  }

  .nav-dropdown-menu a {
    color: #4d5854;
    font-size: 15px;
    padding: 12px;
  }

  .nav-actions {
    align-items: stretch;
    border-top: 1px solid #d6ddd7;
    display: grid;
    gap: 12px;
    padding-top: 18px;
  }

  .nav-socials {
    justify-content: flex-start;
  }

  .nav-phone,
  .nav-main-site,
  .nav-cta {
    display: inline-flex;
    justify-content: center;
    text-align: center;
    width: 100%;
  }
}

@media (max-width: 520px) {
  .site-nav {
    min-height: 68px;
    padding: 0 14px;
  }

  .site-logo img {
    width: 148px;
  }

  .nav-menu {
    left: 0;
    right: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0 0 8px 8px;
  }
}
/*NAVBAR STYLING*/
#navbar {
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 5px;
  padding-top: 5px;
  display: flex;
  /* justify-content: left; Aligns the content horizontally */
  justify-content: space-between; /*Pushes logo left, links right*/
  align-items: center; /* Centers the content vertically */

  /* width: 100%; Ensures the navbar spans the full width of its container  - Because the universal reset sets the baseline and div elements natively expand to fill their available container, you can safely remove the width: 100% declaration from your #navbar*/
}
#nav-logo {
  width: 200px; /* makes the width of the image 250px*/
  height: auto; /*makes the height automatic when the width is applied*/
  align-items: center;
}
/*Styling Nav Links*/
#nav-links {
  /*div container for nav links*/
  display: flex;
  align-items: flex-end;
  gap: 20px; /*Creates consistent spacing between the phone and link*/
  align-self: flex-end; /*Pushes the entire container to the bottom of the parent #navbar */
  margin-bottom: 10px;
}
#nav-links p {
  margin: 0px; /*Removes the default paragraph spacing*/
  color: #333333;
  font-size: 14px;
  font-weight: 500;
}
#nav-links a:not(.button-green) {
  text-decoration: none;
  font-weight: 400;
  font-size: 14px;
}
#nav-links #book-site {
  text-decoration: none;
  color: #991414;
  font-weight: 400;
  /* font-size: 12px; */
}
#nav-links #book-site:hover {
  color: #65b619;
}
#nav-links a.phone-link {
  /*This overrides the above styling of the other nav-links a tags */
  color: #333333;
  text-decoration: none;
  font-weight: normal;
}
/*ICONS*/
.icons {
  width: 32px;
  height: auto;
  cursor: pointer;
  margin-bottom: -5px;
} /*If you later decide that icons in the footer need to be slightly smaller than the ones in the navigation bar, you would keep this global .icons rule for the baseline style, and write a new, more specific rule (like #footer .icons { width: 24px; }) to override the width for that specific area.*/

/*CONTAINER FOR THE LOWER NAVIGATION BAR*/
#sub-nav {
  /* padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 5px; */
  padding: 0px 50px 5px 50px;
}
#sub-nav ul {
  display: flex;
  justify-content: flex-start; /*Aligns all links to the left*/
  gap: 50px; /*Controls the exact spacing between each word*/
  list-style: none;
  /*THE SEPARATOR LINE*/
  border-top: 2px solid #0b6369;
  padding-top: 10px;
}
#sub-nav a:not(.button-green) {
  text-decoration: none;
  color: #333333;
  font-size: 16px;
}
/* GREEN BUTTONS*/
.button-green {
  padding: 8px 20px;
  border-radius: 20px;
  background-color: #0b6369;
  color: #f3f3f3;
  text-decoration: none;
  border: none;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  display: inline-block; /* Ensures consistent padding behavior on anchor tags */
  font-family: inherit; /* Inherits the Arial base font */
}
/* =========================================
   STICKY HEADER (Desktop & Large Screens)
   ========================================= */
@media (min-width: 1024px) {
  #main-header {
    position: sticky;
    top: 0; /* Tells the header to stick exactly to the top of the browser window */
    z-index: 9999; /* Forces the header to sit above all scrolling images and text */
    background-color: #f3f3f3; /* Prevents any gaps between the two nav bars from being transparent */
  }
}

/* =========================================
   HOME PAGE: HERO SECTION
   ========================================= */

#hero {
  background-size: cover; /* Forces the image to completely cover the section */
  background-position: center; /* Centers the focal point of the image */
  background-repeat: no-repeat;
  min-height: 80vh; /* Ensures the section takes up at least 80% of the screen height */
  display: flex;
  align-items: center; /* Vertically centers the text container */
  padding: 0 10%; /* Uses percentages for responsive left/right spacing */
}

/* This controls the text block layout */
#hero .hero-content {
  max-width: 900px; /* Prevents the text from stretching too wide on massive screens */
  text-align: left;
}

#hero .hero-content h1 {
  color: #ffffff; /* White text */
  font-size: 40px;
  font-weight: 500;
  line-height: 1.5em; /* Tightens the space between the two lines of the heading */
  margin-bottom: 20px;
}

#hero .hero-content p {
  color: #e0e0e0; /* Slightly off-white for visual hierarchy */
  font-size: 20px;
  line-height: 1.5em;
  margin-bottom: 30px;
  max-width: 800px;
}
/* Hero Section Button Alignment */
#hero .hero-content .button-green {
  display: inline-block; /* Allows the button to have padding and margin while sitting on its own line */
  margin-top: 20px; /* Adds breathing room between the paragraph and the button */

  /* The next two lines are optional, but recommended for a larger, more prominent hero button */
  /* padding: 15px 30px;
  font-size: 18px; */
}

/* =========================================
   MOBILE & TABLET RESPONSIVENESS (Screens under 768px)
   ========================================= */
@media (max-width: 768px) {
  /* 1. Hero Section Scaling */
  #hero {
    padding: 0 5%; /* Reduces the left/right void spaces */
    min-height: 60vh; /* Prevents the image from taking up too much vertical screen real estate */
    background-position: center left; /* Ensures the focal point of the image remains visible */
  }

  #hero .hero-content h1 {
    font-size: 32px; /* Scales down massive desktop typography */
    margin-bottom: 15px;
  }

  #hero .hero-content p {
    font-size: 16px;
    margin-bottom: 20px;
  }

  #hero .hero-content .button-green {
    width: 100%; /* Makes the button full-width for easier thumb-tapping */
    text-align: center;
    box-sizing: border-box;
  }

  /* 2. Top Navigation Re-alignment */
  #navbar {
    flex-direction: column; /* Stacks the logo on top of the contact links */
    padding: 15px;
    align-items: center;
  }

  #nav-links {
    align-self: center; /* Centers the phone/socials block under the logo */
    margin-top: 15px;
    gap: 15px; /* Tightens the space between icons and text */
    flex-wrap: wrap; /* Allows items to drop to a new line if the screen is exceptionally narrow */
    justify-content: center;
  }

  /* 3. Sub-Navigation Wrapping */
  #sub-nav {
    padding: 0 15px 5px 15px;
  }

  #sub-nav ul {
    flex-wrap: wrap; /* Forces the long row of page links to form multiple neat rows */
    gap: 15px;
    padding-top: 15px;
  }
}
/* Footer styling */
#main-footer {
  background: var(--masters-ink);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
  padding: 46px 28px 28px;
}

.footer-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.8fr) minmax(
      240px,
      0.9fr
    );
  margin: 0 auto;
  max-width: 1180px;
}

.footer-brand,
.footer-heading {
  color: var(--masters-white);
  font-weight: 700;
  margin-bottom: 10px;
}

.footer-brand-lockup {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.footer-brand-lockup img {
  flex: 0 0 auto;
  height: 34px;
  width: 34px;
}

.footer-brand-lockup .footer-brand {
  margin-bottom: 0;
}

#main-footer p {
  line-height: 1.6;
  margin: 0 0 8px;
}

#main-footer a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
}

#main-footer a:hover,
#main-footer a:focus-visible {
  color: #d9c29b;
}

.footer-copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
  margin: 28px auto 0;
  max-width: 1180px;
  padding-top: 20px;
}

/* =========================================
   FITTED FURNITURE LANDING PAGE
   ========================================= */

:root {
  --masters-ink: #182321;
  --masters-muted: #5c6662;
  --masters-teal: #0b6369;
  --masters-teal-dark: #083f43;
  --masters-gold: #b99662;
  --masters-soft: #f3f3f3;
  --masters-hero-neutral: #d2d2d2;
  --masters-white: #ffffff;
  --masters-border: #d9ded8;
}

body {
  color: var(--masters-ink);
}

.section-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 56px 0;
  position: relative;
}

main > section.section-shell:nth-of-type(n + 3)::before,
main > section:nth-of-type(n + 3) > .section-shell::before {
  background: rgba(11, 99, 105, 0.32);
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 34px;
}

.eyebrow {
  color: var(--masters-teal);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.section-heading h2,
.intro-section h2,
.why-copy h2,
.partner-section h2,
.enquiry-copy h2 {
  color: var(--masters-ink);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.12;
  margin-bottom: 18px;
}

.section-lead,
.why-copy p:not(.eyebrow),
.partner-section p:not(.eyebrow),
.enquiry-copy p:not(.eyebrow) {
  color: var(--masters-muted);
  font-size: 18px;
  line-height: 1.75;
  max-width: 850px;
}

.furniture-hero {
  background: url("/images/furniture/showroom-hero-furniture.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  min-height: calc(100svh - 78px);
  overflow: hidden;
  padding: 0;
  position: relative;
}

.furniture-hero::before {
  background:
    linear-gradient(
      90deg,
      rgba(8, 16, 14, 0.78) 0%,
      rgba(8, 16, 14, 0.6) 32%,
      rgba(8, 16, 14, 0.2) 60%,
      rgba(8, 16, 14, 0.04) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 16, 14, 0.04) 0%,
      rgba(8, 16, 14, 0.28) 100%
    );
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.hero-video {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit;
  padding: clamp(34px, 4.8vh, 56px) 10% 28px;
  position: relative;
  width: 100%;
  z-index: 2;
}

.furniture-hero .hero-content {
  max-width: 860px;
}

.furniture-hero h1 {
  color: var(--masters-white);
  font-size: clamp(42px, 4.7vw, 70px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.02;
  margin-bottom: 20px;
  max-width: 900px;
}

.furniture-hero p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.62;
  max-width: 720px;
}

.furniture-hero .eyebrow {
  color: #d9c29b;
  font-size: 13px;
  margin-bottom: 16px;
}

.hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.furniture-hero .button-green {
  background: #d9c29b;
  color: #12201d;
  font-weight: 800;
}

.furniture-hero .button-green:hover,
.furniture-hero .button-green:focus-visible {
  background: #f1dfbd;
  color: #12201d;
}

.button-large {
  align-items: center;
  border-radius: 4px;
  box-sizing: border-box;
  display: inline-flex;
  font-size: 16px;
  height: 52px;
  justify-content: center;
  padding: 0 24px;
}

.button-outline {
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--masters-white);
  display: inline-flex;
  font-size: 16px;
  font-weight: 700;
  height: 52px;
  justify-content: center;
  padding: 0 24px;
  text-decoration: none;
  align-items: center;
}

.furniture-hero .hero-actions .button-green,
.furniture-hero .hero-actions .button-outline {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  height: 52px;
  justify-content: center;
  line-height: 1.2;
  margin: 0;
  padding: 0 24px;
  vertical-align: middle;
}

.button-green:hover,
.button-outline:hover {
  background-color: var(--masters-teal-dark);
  color: var(--masters-white);
}

.hero-proof {
  align-items: stretch;
  border-top: 1px solid rgba(255, 255, 255, 0.26);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin-top: clamp(22px, 4.8vh, 48px);
  max-width: 860px;
  padding: 20px 0 0;
}

.hero-proof li {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.35;
  padding-right: 26px;
}

.hero-proof strong {
  color: #d9c29b;
  display: block;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.intro-section {
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.intro-section.section-shell {
  padding-bottom: 34px;
}

#services.section-shell {
  padding-top: 44px;
}

.service-grid,
.gallery-grid,
.process-grid {
  display: grid;
  gap: 22px;
}

.service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-card,
.project-card,
.benefit-list article,
.process-grid article {
  background: var(--masters-white);
  border: 1px solid var(--masters-border);
  border-radius: 8px;
  padding: 26px;
}

a.service-card {
  color: inherit;
  display: block;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

a.service-card:hover,
a.service-card:focus-visible {
  border-color: var(--masters-teal);
  box-shadow: 0 18px 36px rgba(24, 35, 33, 0.12);
  transform: translateY(-2px);
}

.service-card h3,
.project-card h3,
.benefit-list h3,
.process-grid h3 {
  color: var(--masters-ink);
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 12px;
}

.service-card p,
.project-card p,
.benefit-list p,
.process-grid p {
  color: var(--masters-muted);
  line-height: 1.65;
  margin: 0;
}

.process-band,
.enquiry-section {
  background: var(--masters-soft);
}

.process-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.process-grid article span {
  color: var(--masters-gold);
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
}

.why-grid,
.partner-section {
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: start;
}

.benefit-list {
  display: grid;
  gap: 18px;
}

.trust-feature {
  align-items: stretch;
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
}

.trust-feature-image {
  border-radius: 8px;
  min-height: 360px;
  overflow: hidden;
}

.trust-feature-image img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.trust-feature-content {
  background: var(--masters-ink);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 46px);
}

.trust-feature-content .eyebrow {
  color: #d9c29b;
}

.trust-feature-content h2 {
  color: var(--masters-white);
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 28px;
}

.trust-highlight-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trust-highlight-grid article {
  border-left: 3px solid var(--masters-gold);
  padding-left: 14px;
}

.trust-highlight-grid strong,
.trust-highlight-grid span {
  display: block;
}

.trust-highlight-grid strong {
  color: var(--masters-white);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

.trust-highlight-grid span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  line-height: 1.45;
}

.manufacturing-summary {
  display: grid;
  gap: 18px;
}

.gallery-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-card {
  overflow: hidden;
  padding: 0;
}

.project-card h3,
.project-card p {
  padding-left: 24px;
  padding-right: 24px;
}

.project-card h3 {
  margin-top: 24px;
}

.project-card p {
  padding-bottom: 26px;
}

.project-image {
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, rgba(11, 99, 105, 0.18), rgba(185, 150, 98, 0.2)),
    repeating-linear-gradient(90deg, #d8dcda 0 18px, #eceeee 18px 36px);
  border-bottom: 1px solid var(--masters-border);
}

.media-card .project-image {
  background:
    linear-gradient(135deg, rgba(24, 35, 33, 0.2), rgba(11, 99, 105, 0.16)),
    linear-gradient(90deg, #d8dcda 0 18%, #f3f3f3 18% 82%, #d8dcda 82%);
}

.office-card .project-image {
  background:
    linear-gradient(135deg, rgba(185, 150, 98, 0.24), rgba(11, 99, 105, 0.12)),
    linear-gradient(180deg, #f3f3f3 0 52%, #d8dcda 52%);
}

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-list details {
  background: var(--masters-white);
  border: 1px solid var(--masters-border);
  border-radius: 8px;
  padding: 20px 24px;
}

.faq-list summary {
  color: var(--masters-ink);
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
}

.faq-list p {
  color: var(--masters-muted);
  line-height: 1.65;
  margin: 14px 0 0;
}

.service-area-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-area-grid p {
  background: var(--masters-white);
  border: 1px solid var(--masters-border);
  border-left: 3px solid var(--masters-gold);
  border-radius: 8px;
  color: var(--masters-muted);
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
  padding: 24px 26px;
}

.contact-section {
  background: var(--masters-soft);
}

.contact-layout {
  display: grid;
  gap: 44px;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.contact-card-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-card {
  background: var(--masters-white);
  border: 1px solid var(--masters-border);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 24px;
}

.contact-card span {
  color: var(--masters-gold);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.contact-card a {
  color: var(--masters-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.contact-card a:hover,
.contact-card a:focus-visible {
  color: var(--masters-teal);
}

.contact-card-accent {
  background: var(--masters-ink);
  border-color: var(--masters-ink);
}

.contact-card-accent a {
  color: var(--masters-white);
}

.enquiry-layout {
  display: grid;
  gap: 44px;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
}

.form-note {
  border-left: 3px solid var(--masters-gold);
  margin-top: 22px;
  padding-left: 16px;
}

.enquiry-form {
  background: var(--masters-white);
  border: 1px solid var(--masters-border);
  border-radius: 8px;
  padding: 28px;
}

.enquiry-form fieldset {
  border: 0;
  margin: 0 0 28px;
  padding: 0;
}

.enquiry-form legend {
  color: var(--masters-ink);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 18px;
}

.form-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.enquiry-form label,
.checkbox-group p {
  color: var(--masters-ink);
  display: grid;
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
  margin-bottom: 18px;
}

.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea {
  border: 1px solid #c9d0ca;
  border-radius: 4px;
  color: var(--masters-ink);
  font: inherit;
  font-weight: 400;
  padding: 12px 13px;
  width: 100%;
}

.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus {
  border-color: var(--masters-teal);
  outline: 3px solid rgba(11, 99, 105, 0.15);
}

.checkbox-group {
  border: 1px solid var(--masters-border);
  border-radius: 8px;
  margin: 8px 0 24px;
  padding: 18px;
}

.checkbox-group p {
  margin-bottom: 12px;
}

.checkbox-group label {
  align-items: center;
  display: inline-flex;
  font-weight: 500;
  margin: 0 18px 12px 0;
}

.checkbox-group input {
  width: auto;
}

.upload-note {
  background: var(--masters-white);
  border: 1px solid var(--masters-border);
  border-left: 4px solid var(--masters-gold);
  border-radius: 8px;
  margin-bottom: 24px;
  padding: 20px;
}

.upload-note h3 {
  color: var(--masters-ink);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.upload-note p {
  color: var(--masters-muted);
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 10px;
}

.upload-note p:last-child {
  margin-bottom: 0;
}

.upload-note a,
.form-note a {
  color: var(--masters-teal);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.field-error {
  color: #991414;
  font-size: 13px;
  font-weight: 500;
  min-height: 18px;
}

.form-status {
  color: var(--masters-muted);
  line-height: 1.5;
  margin-bottom: 18px;
  min-height: 24px;
}

.form-status.is-success {
  color: #1d6a35;
  font-weight: 700;
}

.form-status.is-error {
  color: #991414;
  font-weight: 700;
}

.enquiry-form button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.hidden-field {
  left: -9999px;
  position: absolute;
}

.service-card {
  overflow: hidden;
  padding: 0;
}

.service-card img {
  aspect-ratio: 16 / 10;
  display: block;
  height: clamp(220px, 18vw, 295px);
  object-fit: cover;
  width: 100%;
}

.service-card:nth-child(1) img {
  object-position: 42% center;
  transform: scale(1.08);
}

.service-card:nth-child(3) img {
  object-position: 62% center;
  transform: scale(1.08);
}

.service-card h3,
.service-card p {
  padding-left: 24px;
  padding-right: 24px;
}

.service-card h3 {
  margin-top: 22px;
}

.service-card p {
  padding-bottom: 24px;
}

.project-image {
  display: block;
  object-fit: cover;
  width: 100%;
}

.portfolio-link {
  border-bottom: 2px solid var(--masters-teal);
  color: var(--masters-teal);
  display: inline-flex;
  font-weight: 700;
  margin-top: 16px;
  padding-bottom: 4px;
  text-decoration: none;
}

.portfolio-link:hover,
.portfolio-link:focus-visible {
  color: var(--masters-teal-dark);
}

/* =========================================
   PORTFOLIO PAGE
   ========================================= */

.portfolio-hero {
  background:
    linear-gradient(
      90deg,
      rgba(8, 16, 14, 0.78) 0%,
      rgba(8, 16, 14, 0.58) 32%,
      rgba(8, 16, 14, 0.18) 60%,
      rgba(8, 16, 14, 0.03) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 16, 14, 0.06) 0%,
      rgba(8, 16, 14, 0.26) 100%
    ),
    url("/images/furniture/showroom-hero-furniture.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  min-height: min(620px, calc(100svh - 78px));
}

.portfolio-hero-inner {
  align-items: center;
  display: flex;
  min-height: inherit;
  padding: clamp(42px, 6vh, 70px) 10%;
  width: 100%;
}

.portfolio-hero-content {
  max-width: 720px;
}

.portfolio-hero h1 {
  color: var(--masters-white);
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 600;
  line-height: 1.04;
  margin-bottom: 22px;
}

.portfolio-hero p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.62;
  max-width: 720px;
}

.portfolio-hero .eyebrow {
  color: #d9c29b;
}

.portfolio-brief-list p,
.portfolio-cta p:not(.eyebrow) {
  color: var(--masters-muted);
  font-size: 18px;
  line-height: 1.75;
}

.portfolio-hero .button-green {
  background: #d9c29b;
  color: #12201d;
  font-weight: 800;
}

.portfolio-hero .button-green:hover,
.portfolio-hero .button-green:focus-visible {
  background: #f1dfbd;
  color: #12201d;
}

.portfolio-type-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portfolio-type-card {
  background: var(--masters-white);
  border: 1px solid var(--masters-border);
  border-radius: 8px;
  color: inherit;
  display: grid;
  grid-template-columns: minmax(180px, 0.82fr) minmax(0, 1fr);
  overflow: hidden;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.portfolio-type-card:hover,
.portfolio-type-card:focus-visible {
  border-color: var(--masters-teal);
  box-shadow: 0 18px 36px rgba(24, 35, 33, 0.12);
  transform: translateY(-2px);
}

.portfolio-type-card img {
  display: block;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  width: 100%;
}

.portfolio-type-card div {
  padding: 26px;
}

.type-label {
  color: var(--masters-gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.portfolio-type-card h3 {
  color: var(--masters-ink);
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 12px;
}

.portfolio-type-card p:not(.type-label) {
  color: var(--masters-muted);
  line-height: 1.65;
  margin: 0;
}

.portfolio-method-band {
  background: var(--masters-soft);
}

.portfolio-method-grid {
  display: grid;
  gap: 44px;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.portfolio-method-grid h2 {
  color: var(--masters-ink);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 600;
  line-height: 1.08;
}

.portfolio-method-grid .eyebrow {
  color: var(--masters-teal);
}

.portfolio-brief-list {
  display: grid;
  gap: 18px;
}

.portfolio-brief-list p {
  background: var(--masters-white);
  border: 1px solid var(--masters-border);
  border-left: 3px solid var(--masters-gold);
  border-radius: 8px;
  color: var(--masters-muted);
  padding: 20px 22px;
}

.portfolio-cta {
  background: var(--masters-soft);
  text-align: center;
}

.portfolio-cta h2 {
  color: var(--masters-ink);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 600;
  line-height: 1.08;
  margin-bottom: 24px;
  margin-left: auto;
  margin-right: auto;
  max-width: 760px;
}

.portfolio-cta .eyebrow {
  color: var(--masters-teal);
}

/* =========================================
   MANUFACTURING PAGE
   ========================================= */

.manufacturing-hero {
  background: var(--masters-hero-neutral);
}

.manufacturing-hero-luxe {
  position: relative;
}

.manufacturing-hero-grid {
  align-items: center;
  display: grid;
  gap: 38px;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
}

.manufacturing-hero h1 {
  color: var(--masters-ink);
  font-size: clamp(40px, 4.6vw, 62px);
  font-weight: 600;
  line-height: 1.04;
  margin-bottom: 22px;
}

.manufacturing-hero p:not(.eyebrow) {
  color: var(--masters-muted);
  font-size: 18px;
  line-height: 1.75;
}

.manufacturing-hero img {
  border-radius: 8px;
  border: 8px solid rgba(255, 255, 255, 0.86);
  box-shadow: 0 24px 60px rgba(24, 35, 33, 0.14);
  display: block;
  height: clamp(320px, 35vw, 520px);
  object-fit: cover;
  width: 100%;
}

.machine-story {
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.machine-flow {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.machine-flow article {
  background: var(--masters-white);
  border: 1px solid var(--masters-border);
  border-radius: 8px;
  padding: 24px;
}

.machine-flow span {
  color: var(--masters-gold);
  display: block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.machine-flow h3 {
  color: var(--masters-ink);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.machine-flow p {
  color: var(--masters-muted);
  line-height: 1.6;
  margin: 0;
}

.machine-band {
  background: var(--masters-soft);
}

.machine-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.machine-card {
  background: var(--masters-white);
  border: 1px solid var(--masters-border);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  overflow: hidden;
}

.machine-card-wide {
  grid-column: 1 / -1;
}

.machine-card img {
  display: block;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  width: 100%;
}

.machine-card div {
  padding: 28px;
}

.machine-card h3 {
  color: var(--masters-ink);
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 12px;
}

.machine-card p:not(.type-label) {
  color: var(--masters-muted);
  line-height: 1.65;
  margin: 0;
}

.materials-section {
  background: var(--masters-soft);
}

.materials-layout {
  align-items: stretch;
  display: grid;
  gap: 44px;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.65fr);
  margin-bottom: 34px;
}

.materials-note {
  background: var(--masters-white);
  border: 1px solid var(--masters-border);
  border-left: 4px solid var(--masters-gold);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: clamp(26px, 3vw, 40px);
}

.materials-note p {
  color: var(--masters-teal);
  font-weight: 700;
  line-height: 1.7;
  margin: 0;
}

.materials-section a {
  color: var(--masters-teal);
  font-weight: 500;
  text-decoration: none;
}

.materials-section a:hover,
.materials-section a:focus-visible {
  color: var(--masters-teal-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.materials-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.materials-grid article {
  background: var(--masters-white);
  border: 1px solid var(--masters-border);
  border-radius: 8px;
  padding: 24px;
}

.materials-grid span {
  color: var(--masters-gold);
  display: block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}

.materials-grid h3 {
  color: var(--masters-ink);
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 10px;
}

.materials-grid p {
  color: var(--masters-muted);
  line-height: 1.65;
  margin: 0;
}

.manufacturing-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.manufacturing-card {
  background: var(--masters-white);
  border: 1px solid var(--masters-border);
  border-radius: 8px;
  overflow: hidden;
}

.manufacturing-card img {
  aspect-ratio: 16 / 10;
  display: block;
  height: clamp(210px, 18vw, 270px);
  object-fit: cover;
  width: 100%;
}

.manufacturing-card div {
  padding: 24px;
}

.manufacturing-card h3 {
  color: var(--masters-ink);
  font-size: 23px;
  font-weight: 600;
  margin-bottom: 10px;
}

.manufacturing-card p:not(.type-label) {
  color: var(--masters-muted);
  line-height: 1.65;
  margin: 0;
}

.manufacturing-band {
  background: var(--masters-soft);
}

.manufacturing-band-grid {
  display: grid;
  gap: 44px;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.manufacturing-band-grid h2 {
  color: var(--masters-ink);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 600;
  line-height: 1.08;
}

.manufacturing-band-grid .eyebrow {
  color: var(--masters-teal);
}

.manufacturing-list {
  display: grid;
  gap: 16px;
}

.manufacturing-list p {
  background: var(--masters-white);
  border: 1px solid var(--masters-border);
  border-left: 3px solid var(--masters-gold);
  border-radius: 8px;
  color: var(--masters-muted);
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
  padding: 20px 22px;
}

/* =========================================
   PORTFOLIO CATEGORY PAGES
   ========================================= */

.category-hero {
  background: var(--masters-hero-neutral);
}

.category-hero-grid {
  align-items: center;
  display: grid;
  gap: 46px;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.category-hero h1 {
  color: var(--masters-ink);
  font-size: clamp(42px, 5.5vw, 72px);
  font-weight: 600;
  line-height: 1.04;
  margin-bottom: 22px;
}

.category-hero p:not(.eyebrow) {
  color: var(--masters-muted);
  font-size: 18px;
  line-height: 1.75;
}

.category-hero img {
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(24, 35, 33, 0.18);
  display: block;
  height: auto;
  max-height: 620px;
  object-fit: cover;
  width: 100%;
}

.category-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.button-muted {
  border: 1px solid var(--masters-ink);
  border-radius: 4px;
  color: var(--masters-ink);
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  padding: 13px 24px;
  text-decoration: none;
}

.button-muted:hover,
.button-muted:focus-visible {
  border-color: var(--masters-teal);
  color: var(--masters-teal);
}

.category-gallery {
  display: grid;
  gap: 28px 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.category-gallery-card {
  background: transparent;
  border-radius: 8px;
  margin: 0;
}

.category-gallery-card img {
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(24, 35, 33, 0.1);
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.category-gallery-button {
  background: none;
  border: 0;
  cursor: pointer;
  display: block;
  padding: 0;
  position: relative;
  text-align: left;
  width: 100%;
}

.category-gallery-button img {
  transition:
    filter 180ms ease,
    transform 180ms ease;
}

.category-gallery-button span {
  background: rgba(20, 34, 31, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  bottom: 14px;
  color: var(--masters-white);
  font-size: 13px;
  font-weight: 700;
  left: 14px;
  letter-spacing: 0;
  padding: 8px 11px;
  position: absolute;
}

.category-gallery-button:hover img,
.category-gallery-button:focus-visible img {
  filter: brightness(0.86);
  transform: translateY(-2px);
}

.category-gallery-button:focus-visible {
  border-radius: 8px;
  outline: 3px solid rgba(0, 112, 120, 0.36);
  outline-offset: 4px;
}

.category-gallery-card figcaption {
  border-left: 3px solid var(--masters-gold);
  color: var(--masters-muted);
  font-size: 15px;
  line-height: 1.55;
  margin-top: 14px;
  padding-left: 14px;
}

.lightbox-open {
  overflow: hidden;
}

.portfolio-lightbox {
  align-items: center;
  background: rgba(12, 23, 21, 0.88);
  display: none;
  inset: 0;
  justify-content: center;
  padding: 28px;
  position: fixed;
  z-index: 1000;
}

.portfolio-lightbox.is-open {
  display: flex;
}

.portfolio-lightbox__panel {
  max-width: min(1120px, 100%);
  position: relative;
  width: 100%;
}

.portfolio-lightbox figure {
  margin: 0;
}

.portfolio-lightbox img {
  background: #f3f3f3;
  border-radius: 8px;
  display: block;
  max-height: calc(100vh - 150px);
  object-fit: contain;
  width: 100%;
}

.portfolio-lightbox figcaption {
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.55;
  margin-top: 12px;
  min-height: 24px;
  text-align: center;
}

.portfolio-lightbox__close,
.portfolio-lightbox__arrow {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--masters-ink);
  cursor: pointer;
  font-weight: 700;
  position: absolute;
}

.portfolio-lightbox__close {
  border-radius: 4px;
  font-size: 14px;
  padding: 9px 13px;
  right: 0;
  top: -54px;
}

.portfolio-lightbox__arrow {
  align-items: center;
  border-radius: 999px;
  display: flex;
  font-size: 44px;
  height: 52px;
  justify-content: center;
  line-height: 1;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
}

.portfolio-lightbox__arrow--prev {
  left: -68px;
}

.portfolio-lightbox__arrow--next {
  right: -68px;
}

.portfolio-lightbox__close:hover,
.portfolio-lightbox__close:focus-visible,
.portfolio-lightbox__arrow:hover,
.portfolio-lightbox__arrow:focus-visible {
  background: var(--masters-gold);
}

.portfolio-lightbox__count {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  margin: 8px 0 0;
  text-align: center;
}

.category-detail-band {
  background: var(--masters-soft);
}

.category-detail-grid {
  display: grid;
  gap: 44px;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.category-detail-grid h2 {
  color: var(--masters-ink);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 600;
  line-height: 1.08;
}

.category-detail-grid .eyebrow {
  color: var(--masters-teal);
}

.category-checklist {
  display: grid;
  gap: 16px;
}

.category-checklist p {
  background: var(--masters-white);
  border: 1px solid var(--masters-border);
  border-left: 3px solid var(--masters-gold);
  border-radius: 8px;
  color: var(--masters-muted);
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
  padding: 20px 22px;
}

/* =========================================
   404 ERROR PAGE
   ========================================= */

.error-hero {
  background: var(--masters-hero-neutral);
}

.error-hero-grid {
  align-items: center;
  display: grid;
  gap: 46px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  min-height: min(620px, calc(100svh - 78px));
}

.error-copy h1 {
  color: var(--masters-ink);
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 600;
  line-height: 1.04;
  margin-bottom: 22px;
}

.error-copy p:not(.eyebrow) {
  color: var(--masters-muted);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.65;
  max-width: 680px;
}

.error-image {
  background: var(--masters-white);
  border: 1px solid rgba(24, 35, 33, 0.12);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(24, 35, 33, 0.14);
  margin: 0;
  overflow: hidden;
}

.error-image img {
  aspect-ratio: 16 / 10;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.error-image figcaption {
  color: var(--masters-muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  padding: 18px 20px;
}

.error-links-section {
  background: var(--masters-soft);
}

.error-link-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.error-link-grid a {
  background: var(--masters-white);
  border: 1px solid var(--masters-border);
  border-radius: 8px;
  color: var(--masters-muted);
  display: block;
  line-height: 1.6;
  padding: 22px;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.error-link-grid a:hover,
.error-link-grid a:focus-visible {
  border-color: var(--masters-teal);
  box-shadow: 0 18px 36px rgba(24, 35, 33, 0.12);
  transform: translateY(-2px);
}

.error-link-grid span {
  color: var(--masters-ink);
  display: block;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

@media (max-width: 1024px) {
  .service-grid,
  .process-grid,
  .gallery-grid,
  .intro-section,
  .why-grid,
  .partner-section,
  .trust-feature,
  .contact-layout,
  .enquiry-layout,
  .materials-layout,
  .machine-story,
  .service-area-grid,
  .portfolio-method-grid,
  .manufacturing-hero-grid,
  .manufacturing-band-grid,
  .category-hero-grid,
  .category-detail-grid {
    grid-template-columns: 1fr 1fr;
  }

  .intro-section,
  .why-grid,
  .partner-section,
  .trust-feature,
  .contact-layout,
  .enquiry-layout,
  .materials-layout,
  .machine-story,
  .portfolio-method-grid,
  .manufacturing-hero-grid,
  .manufacturing-band-grid,
  .category-hero-grid,
  .category-detail-grid {
    gap: 28px;
  }

  .portfolio-type-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .error-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .error-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manufacturing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .machine-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .materials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .machine-grid,
  .machine-card {
    grid-template-columns: 1fr;
  }

  .machine-card img {
    height: clamp(220px, 34vw, 320px);
    min-height: 0;
  }
}

@media (max-width: 1180px) {
  .contact-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .contact-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .hero-proof {
    display: none;
  }
}

@media (max-height: 700px) and (orientation: landscape) {
  .furniture-hero {
    min-height: calc(100svh - 68px);
  }

  .hero-inner {
    min-height: calc(100svh - 68px);
    padding: 28px 7%;
  }

  .furniture-hero .hero-content {
    max-width: 680px;
  }

  .furniture-hero h1 {
    font-size: clamp(34px, 5.2vw, 54px);
    margin-bottom: 14px;
  }

  .furniture-hero p:not(.eyebrow) {
    font-size: 15px;
    line-height: 1.45;
    max-width: 620px;
  }

  .furniture-hero .eyebrow {
    margin-bottom: 10px;
  }

  .hero-actions {
    margin-top: 18px;
  }

  .button-large,
  .button-outline {
    padding: 11px 20px;
  }
}

@media (max-width: 768px) {
  .section-shell {
    width: min(100% - 28px, 680px);
    padding: 42px 0;
  }

  .furniture-hero {
    min-height: auto;
    background-position: 62% center;
  }

  .hero-inner {
    min-height: calc(100svh - 68px);
    padding: 54px 20px 30px;
  }

  .furniture-hero h1 {
    font-size: clamp(38px, 10.8vw, 56px);
    line-height: 1.02;
  }

  .hero-actions,
  .hero-actions a {
    width: 100%;
  }

  .hero-actions a {
    text-align: center;
  }

  .hero-proof {
    display: none;
  }

  .service-grid,
  .process-grid,
  .gallery-grid,
  .intro-section,
  .why-grid,
  .partner-section,
  .trust-feature,
  .contact-layout,
  .contact-card-grid,
  .enquiry-layout,
  .form-grid,
  .materials-layout,
  .materials-grid,
  .machine-story,
  .machine-flow,
  .machine-grid,
  .machine-card,
  .service-area-grid,
  .portfolio-method-grid,
  .manufacturing-hero-grid,
  .manufacturing-band-grid,
  .manufacturing-grid,
  .portfolio-type-card,
  .category-hero-grid,
  .category-detail-grid,
  .category-gallery {
    grid-template-columns: 1fr;
  }

  .enquiry-form {
    padding: 22px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .error-hero-grid,
  .error-link-grid {
    grid-template-columns: 1fr;
  }

  .error-hero-grid {
    gap: 28px;
  }

  .error-copy h1 {
    font-size: clamp(36px, 10vw, 48px);
  }

  .checkbox-group label {
    display: flex;
    margin-right: 0;
  }

  .portfolio-hero {
    background-position: 58% center;
    min-height: calc(100svh - 68px);
  }

  .portfolio-hero-inner {
    padding: 54px 20px 34px;
  }

  .portfolio-hero h1 {
    font-size: clamp(38px, 10.8vw, 56px);
  }

  .manufacturing-hero .section-shell {
    padding: 36px 0 42px;
  }

  .manufacturing-hero h1 {
    font-size: clamp(36px, 10.2vw, 48px);
    line-height: 1.08;
  }

  .manufacturing-hero p:not(.eyebrow) {
    font-size: 16px;
    line-height: 1.65;
  }

  .manufacturing-hero img {
    height: auto;
    max-height: 360px;
    object-fit: contain;
  }

  .trust-feature-image {
    min-height: 260px;
  }

  .trust-highlight-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-type-card img {
    min-height: 220px;
  }

  .portfolio-type-card,
  .machine-card,
  .manufacturing-card,
  .category-gallery-card {
    background: var(--masters-white);
    border: 1px solid var(--masters-border);
    border-radius: 8px;
    overflow: hidden;
  }

  .portfolio-type-card img,
  .machine-card img,
  .manufacturing-card img,
  .category-gallery-card img,
  .category-gallery-button img {
    border-radius: 0;
    box-shadow: none;
    display: block;
    width: 100%;
  }

  .category-gallery-card figcaption {
    border-left: 0;
    margin: 0;
    padding: 18px 20px 20px;
  }

  .category-actions,
  .category-actions a {
    width: 100%;
  }

  .category-actions a {
    text-align: center;
  }

  .portfolio-lightbox {
    padding: 18px;
  }

  .portfolio-lightbox img {
    max-height: calc(100vh - 170px);
  }

  .portfolio-lightbox__close {
    right: 0;
    top: -48px;
  }

  .portfolio-lightbox__arrow {
    bottom: -58px;
    top: auto;
    transform: none;
  }

  .portfolio-lightbox__arrow--prev {
    left: 0;
  }

  .portfolio-lightbox__arrow--next {
    right: 0;
  }
}