/* CURRENT DESIGN LAYER
   Loaded after styles.css. Sections below refine the shared base styles.
   Later sections contain the active video hero, logo rows, selected-work gallery,
   and final cross-page responsive rules. Check those before editing older rules. */
/* Omonefe's quieter, image-led direction. This layer keeps the existing page
   structure and interactions while simplifying the visual system. */
/* 01. Refined palette and shared header */
:root {
  --forest: #193b30;
  --forest-deep: #142d25;
  --cream: #faf9f5;
  --ink: #23382e;
  --muted: #6e7970;
  --line: #d8dfd5;
}

body { --site-gutter: 0px; padding: 0; background: var(--cream); color: var(--ink); }
#app { position: relative; width: 100%; background: var(--cream); }
.announcement { display: none; }
.container { width: min(100% - 88px, 1320px); }
.eyebrow { color: #718476; font-size: 10px; letter-spacing: .19em; }
h1, h2 { font-weight: 500; }
.site-header,
[data-page="home"] .site-header { position: sticky; top: 0; z-index: 30; background: var(--cream); color: var(--forest); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 82px; }
.logo { gap: 0; min-width: 0; }
.logo-mark { display: none; }
.logo-name { color: var(--forest); font-size: 18px; letter-spacing: .14em; }
.logo-name small { font-size: 6px; letter-spacing: .31em; }
.site-nav { gap: 34px; }
.site-nav a,
[data-page="home"] .site-nav a { color: #405d4c; font-size: 11px; font-weight: 600; }
.site-nav a:hover,
.site-nav a[aria-current="page"],
[data-page="home"] .site-nav a:hover,
[data-page="home"] .site-nav a[aria-current="page"] { color: var(--forest); }
.site-nav .nav-enquire,
[data-page="home"] .site-nav .nav-enquire { background: transparent; color: var(--forest); border: 1px solid #879b89; padding: 12px 15px; }
.site-nav .nav-enquire:hover { background: var(--forest); color: white; }

/* 02. Earlier split-hero layout; the video-hero rules below take precedence */
[data-page="home"] .hero { background: #edf1ea; }
[data-page="home"] .hero-grid { display: grid; grid-template-columns: 49% 51%; min-height: max(640px, calc(100svh - 82px)); }
[data-page="home"] .hero-copy { align-items: flex-start; text-align: left; justify-content: center; padding: 75px 11% 80px 0; }
[data-page="home"] .hero-copy .eyebrow { margin-bottom: 29px; }
[data-page="home"] .hero-copy h1 { font-size: clamp(55px, 5.65vw, 84px); line-height: 1.06; max-width: 650px; margin-bottom: 25px; }
[data-page="home"] .hero-copy h1 em { color: #6b8c74; }
[data-page="home"] .hero-description { color: #64746a; font-size: 15px; line-height: 1.75; max-width: 370px; margin-bottom: 45px; }
.hero-links { width: min(100%, 480px); border-top: 1px solid #c2cdc2; }
.hero-links a { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; min-height: 64px; border-bottom: 1px solid #c2cdc2; color: var(--forest); transition: padding .25s ease, background .25s ease; }
.hero-links a:hover { padding-left: 9px; background: #e5ede3; }
.hero-links a > span:first-child { color: #859787; font-size: 10px; letter-spacing: .08em; }
.hero-links a strong { font-size: 14px; font-weight: 600; }
.hero-links a > span:last-child { font-size: 18px; font-weight: 400; }
.hero-branding-link { color: #52745c; font-size: 11px; font-weight: 700; margin-top: 23px; border-bottom: 1px solid #8ba58d; padding-bottom: 5px; }
.hero-branding-link span { margin-left: 14px; font-size: 16px; }
[data-page="home"] .hero-visual { width: 100%; height: auto; min-height: 0; margin: 0; overflow: hidden; background: #dcc89e; }
[data-page="home"] .hero-visual::before,
[data-page="home"] .hero-visual::after { content: none; }
[data-page="home"] .hero-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-image-caption { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 21px; display: flex; justify-content: space-between; gap: 15px; color: white; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-shadow: 0 1px 8px #0008; }

/* 03. Overlapping content panel and service cards */
.page-overlay { margin-top: -22px; border-radius: 22px 22px 0 0; box-shadow: 0 -12px 35px #18372b19; }
.page-overlay.reveal-ready { transform: translate3d(0, 70px, 0); box-shadow: 0 -3px 12px #18372b08; transition: transform 900ms cubic-bezier(.18, 1, .28, 1), box-shadow 900ms cubic-bezier(.18, 1, .28, 1); }
.page-overlay.reveal-ready.is-visible { transform: translate3d(0, 0, 0); box-shadow: 0 -12px 35px #18372b19; }
.service-showcase { padding: 60px 0; background: var(--cream); border-radius: 22px 22px 0 0; }
.service-showcase > .container { max-width: 1080px; }
.service-showcase-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 50px; }
.service-showcase-heading .eyebrow { margin: 0 0 7px; }
.service-showcase-heading h2 { font-size: clamp(28px, 2.7vw, 37px); line-height: 1.12; margin: 0; }
.service-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.service-card { display: block; min-width: 0; padding-bottom: 20px; border-bottom: 1px solid #cbd5ca; background: transparent; transition: border-color .25s ease; }
.service-card:hover { border-color: var(--forest); }
.service-card:focus-visible { outline: 2px solid var(--forest); outline-offset: 5px; }
.service-card-image { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; background: #e9ebe3; }
.service-card-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .55s ease, transform .7s cubic-bezier(.2, .7, .25, 1); }
.service-image-detail { opacity: 0; transform: scale(1.055); }
.service-card:focus-visible .service-image-detail,
.service-card.is-previewed .service-image-detail { opacity: 1; transform: scale(1); }
.service-card-preview { position: absolute; right: 12px; bottom: 12px; z-index: 1; padding: 7px 9px; background: #193b30d9; color: white; font-size: 9px; letter-spacing: .02em; opacity: 0; pointer-events: none; }
/* Responsive / interaction rule: (hover: hover). */
@media (hover: hover) {
  .service-card:hover .service-image-detail { opacity: 1; transform: scale(1); }
}
/* Responsive / interaction rule: (hover: none). */
@media (hover: none) {
  .service-card.is-previewed .service-card-preview { opacity: 1; }
}
.service-card-content { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-width: 0; padding: 18px 0 0; }
.service-card-top { display: flex; justify-content: space-between; align-items: start; gap: 14px; color: #718777; }
.service-card-top small { font-size: 10px; font-weight: 700; letter-spacing: .16em; line-height: 1.5; }
.service-card-top > span { color: var(--forest); font-size: 20px; line-height: 1; }
.service-card-bottom { display: flex; flex-direction: column; gap: 6px; }
.service-card-bottom strong { color: var(--forest); font-family: 'Manrope', var(--sans); font-size: clamp(21px, 2vw, 24px); font-weight: 500; letter-spacing: -.05em; line-height: 1.16; }
.service-card-bottom > span { color: #748177; font-size: 13px; line-height: 1.5; }
/* 04. Base client showcase; animated rows are defined below */
.client-showcase { padding: 51px 0; background: var(--cream); border-radius: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.client-inner { grid-template-columns: 205px 1fr; gap: 36px; }
.client-intro .eyebrow { max-width: 180px; margin-bottom: 10px; }
.client-intro a { color: #65816a; font-size: 10px; border-color: #c2d0c2; }
.client-logos { gap: 0; }
.client-logo { height: 59px; color: #556b5b; opacity: .82; }
.client-logo + .client-logo { border-color: var(--line); }
.logo-inab { font-size: 27px; }
.logo-inab small { font-size: 6px; }
.logo-inspire { font-size: 27px; }
.logo-inspire span { font-size: 34px; color: #718974; }
.logo-jesus { font-size: 14px; }
.logo-jesus b { color: inherit; }

/* 05. Section spacing and collection card presentation */
.section { padding: 88px 0; }
.section-heading { margin-bottom: 34px; }
.section-heading h2 { font-size: clamp(31px, 3.1vw, 43px); }
.section-heading h2 em { color: #6a8a73; }
.section-heading .text-link { margin-bottom: 11px; }
.section-featured { background: var(--cream); }
.featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 52px 24px; }
.product-card,
.product-card:nth-child(2),
.product-card:nth-child(3),
.product-card:nth-child(4) { display: block; min-height: 0; background: transparent; overflow: visible; }
.product-image,
.catalog-grid .product-image,
.catalog-grid .product-card:last-child .product-image { display: block; width: 100%; margin: 0; aspect-ratio: 1.15 / 1; overflow: hidden; background: #e9e9e1; }
.product-image img { width: 100%; height: 100%; object-fit: cover; }
.product-details { display: flex; order: 0; justify-content: space-between; align-items: center; min-height: 0; padding: 18px 0 0; text-align: left; }
.product-details strong { font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: -.01em; }
.product-details small { color: #758178; font-size: 11px; margin-top: 5px; }
.product-details .round-arrow { position: static; width: 26px; height: 26px; border: 0; font-size: 18px; }
[data-page="home"] .featured-grid .product-card:nth-child(3) { grid-column: auto; }

/* 06. Service list styling */
.home-services { padding: 94px 0 102px; background: #f0f2ec; }
.services-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 41px; }
.services-heading .eyebrow { margin-bottom: 0; }
.services-heading h2 { font-size: clamp(38px, 4vw, 57px); line-height: 1.1; max-width: 660px; margin: 0; }
.services-heading h2 em { color: #6a8a73; }
.services-list { border-top: 1px solid #b7c4b8; }
.services-list a { display: grid; grid-template-columns: 65px minmax(190px, 1fr) minmax(170px, .75fr) 26px; align-items: center; gap: 16px; min-height: 104px; border-bottom: 1px solid #b7c4b8; transition: padding .2s, background .2s; }
.services-list a:hover { padding-left: 12px; background: #e6ede4; }
.services-list a span:first-child { color: #748a78; font-size: 11px; }
.services-list a strong { font-family: 'Manrope', var(--sans); font-size: clamp(21px, 2.3vw, 33px); font-weight: 500; letter-spacing: -.05em; }
.services-list a span:nth-last-child(2) { color: #718076; font-size: 12px; }
.services-list a span:last-child { font-size: 19px; }

/* 07. Studio introduction and enquiry banner */
.about-preview { padding: 88px 0; background: var(--forest); }
.about-preview-grid { gap: 50px; }
.about-preview h2 { font-size: clamp(32px, 3.2vw, 44px); }
.about-preview-grid p:not(.eyebrow) { font-size: 14px; }
.cta-band { background: #e2eadb; padding: 70px 0; }
.cta-band h2 { font-size: clamp(29px, 2.9vw, 40px); }

/* 08. Interior pages: intro, catalog, work, and contact */
.page-intro { background: #f0f3ec; padding: 88px 0 82px; border-bottom: 1px solid var(--line); }
.page-intro h1 { font-size: clamp(48px, 5vw, 68px); }
.about-story-copy h2, .contact-aside h2 { font-size: clamp(31px, 3.1vw, 43px); }
.personal-panel h2 { font-size: clamp(30px, 2.9vw, 38px); }
.page-intro-inner > p { color: #68796d; }
.catalog-section { background: var(--cream); }
.catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 52px 24px; }
.catalog-grid .product-card:last-child { grid-column: auto; }
.filter.active { border-color: var(--forest); }
.personal-panel { background: #eff1e9; grid-template-columns: 1fr; min-height: 0; }
.personal-panel-art { display: none; }
.personal-panel > div:last-child { align-items: center; text-align: center; padding: 100px 25px; }
.personal-panel p:not(.eyebrow) { max-width: 440px; }

.work-image { background: #e9e9e1; }
.work-info { border-color: var(--line); }
.process-section { background: #f0f2ec; }
.enquiry-form { box-shadow: 0 12px 35px #17382e0b; }
.site-footer { background: var(--forest-deep); }

/* Responsive / interaction rule: (max-width: 1100px). */
@media (max-width: 1100px) {
  .container { width: min(100% - 56px, 1320px); }
  [data-page="home"] .hero-grid { min-height: max(620px, calc(100svh - 82px)); }
  [data-page="home"] .hero-copy h1 { font-size: clamp(50px, 5.4vw, 68px); }
  [data-page="home"] .hero-copy { padding-right: 9%; }
}

/* Responsive / interaction rule: (max-width: 760px). */
@media (max-width: 760px) {
  .container { width: min(100% - 38px, 1320px); }
  .header-inner { min-height: 70px; }
  .site-nav,
  [data-page="home"] .site-nav { background: var(--cream); border-top: 1px solid var(--line); }
  .site-nav a,
  [data-page="home"] .site-nav a { color: var(--forest); }
  .menu-toggle span,
  [data-page="home"] .menu-toggle span { background: var(--forest); }
  [data-page="home"] .hero-grid { display: flex; flex-direction: column; min-height: 0; }
  [data-page="home"] .hero-copy { align-items: flex-start; text-align: left; padding: 65px 0 50px; }
  [data-page="home"] .hero-copy h1 { font-size: clamp(53px, 8.5vw, 72px); }
  [data-page="home"] .hero-description { margin-bottom: 32px; }
  [data-page="home"] .hero-visual { width: 100%; flex: none; min-height: 0; height: auto; aspect-ratio: 1.16 / 1; margin: 0; }
  .client-inner { display: block; }
  .client-intro { display: flex; align-items: end; justify-content: space-between; }
  .client-intro .eyebrow { margin: 0; }
  .client-logos { margin-top: 27px; }
  .service-showcase { padding: 48px 0; }
  .service-card-grid { grid-template-columns: 1fr; gap: 28px; max-width: 420px; margin: 0 auto; }
  .service-card-bottom strong { font-size: 20px; }
  .featured-grid { grid-template-columns: repeat(2, 1fr); gap: 38px 16px; }
  .services-heading { display: block; }
  .services-heading h2 { margin-top: 20px; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 38px 16px; }
  .personal-panel > div:last-child { padding: 75px 25px; }
}

/* Responsive / interaction rule: (prefers-reduced-motion: reduce). */
@media (prefers-reduced-motion: reduce) {
  .page-overlay.reveal-ready,
  .page-overlay.reveal-ready.is-visible { transform: none; transition: none; }
  .service-card-image img { transition: none; }
}

/* Responsive / interaction rule: (max-width: 560px). */
@media (max-width: 560px) {
  .container { width: min(100% - 32px, 1320px); }
  .site-header .logo-name { font-size: 17px; }
  [data-page="home"] .hero-copy { padding: 55px 0 43px; }
  [data-page="home"] .hero-copy h1 { font-size: clamp(48px, 12vw, 64px); }
  [data-page="home"] .hero-description { font-size: 13px; }
  .hero-links a { min-height: 57px; }
  [data-page="home"] .hero-visual { aspect-ratio: 1 / .9; }
  .hero-image-caption { left: 15px; right: 15px; bottom: 15px; font-size: 8px; }
  .client-showcase { padding: 37px 0; }
  .client-logos { margin-top: 23px; }
  .service-showcase { padding: 40px 0; }
  .service-showcase-heading { display: block; margin-bottom: 23px; }
  .service-showcase-heading h2 { margin-top: 10px; font-size: 29px; }
  .service-card-grid { grid-template-columns: 1fr; gap: 28px; max-width: 420px; margin: 0 auto; }
  .service-card-content { padding: 18px 0 0; }
  .service-card-bottom strong { font-size: 20px; }
  .client-logo { height: 54px; }
  .logo-inab, .logo-inspire { font-size: 20px; }
  .logo-inspire span { font-size: 26px; }
  .logo-jesus { font-size: 10px; }
  .section { padding: 65px 0; }
  .section-heading h2 { font-size: 32px; }
  .about-preview h2 { font-size: 34px; }
  .cta-band h2 { font-size: 31px; }
  .featured-grid, .catalog-grid { grid-template-columns: 1fr; gap: 34px; }
  .product-image,
  .catalog-grid .product-image,
  .catalog-grid .product-card:last-child .product-image { aspect-ratio: 1.13 / 1; }
  .home-services { padding: 73px 0; }
  .services-heading h2 { font-size: 39px; }
  .services-list a { grid-template-columns: 28px 1fr 20px; gap: 12px; min-height: 89px; }
  .services-list a strong { font-size: 23px; }
  .services-list a span:nth-last-child(2) { display: none; }
  .page-intro { padding: 70px 0; }
  .page-intro h1 { font-size: clamp(40px, 9vw, 52px); }
  .personal-panel > div:last-child { padding: 64px 23px; }
}

/* Photographic Omonefe hero: readable live text over a generated still life. */
[data-page="home"] .site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  background: transparent;
  border: 0;
  color: white;
}
[data-page="home"] .site-header.is-scrolled { background: #102a22f2; }
[data-page="home"] .logo-name,
[data-page="home"] .site-nav a,
[data-page="home"] .site-nav a:hover,
[data-page="home"] .site-nav a[aria-current="page"] { color: white; }
[data-page="home"] .site-nav .nav-enquire {
  color: white;
  background: transparent;
  border-color: #ffffff8c;
}
[data-page="home"] .site-nav .nav-enquire:hover { background: white; color: var(--forest); }
[data-page="home"] .hero {
  top: var(--site-gutter);
  height: calc(100svh - 2 * var(--site-gutter));
  min-height: 620px;
  background: var(--forest-deep);
  color: white;
}
.hero-media,
.hero-shade { position: absolute; inset: 0; }
.hero-media { overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: blur(3px); transform: scale(1.035); }
.hero-shade { background: linear-gradient(90deg, #0d271fb3 0%, #14372ab8 50%, #0d271fb3 100%); }
.hero-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 125px 0 120px;
}
.hero-center .eyebrow { color: #d5e6d8; font-size: 10px; margin-bottom: 23px; }
.hero-center h1 {
  color: white;
  font-size: clamp(43px, 4.6vw, 64px);
  line-height: 1.1;
  letter-spacing: -.065em;
  margin: 0 0 24px;
}
.hero-center h1 em { color: #eff4e9; }
.hero-center > p:not(.eyebrow) { color: #e6eee8; max-width: 540px; font-size: 14px; line-height: 1.7; margin: 0 0 29px; }
.hero-center .hero-actions { display: flex; justify-content: center; gap: 10px; }
.hero-center .button { min-height: 46px; padding: 0 18px; font-size: 11px; }
.hero-primary { color: var(--forest); background: white; }
.hero-primary:hover { background: #e4eddf; }
.hero-secondary { color: white; border-color: #ffffffa1; background: transparent; }
.hero-secondary:hover { background: #ffffff1e; }
.hero-bottom {
  position: absolute;
  z-index: 2;
  bottom: 43px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  color: #d5e0d6;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
}

/* Responsive / interaction rule: (max-width: 760px). */
@media (max-width: 760px) {
  [data-page="home"] .menu-toggle span { background: white; }
  [data-page="home"] .site-nav { background: var(--forest-deep); border-color: #ffffff37; }
  [data-page="home"] .site-nav a,
  [data-page="home"] .site-nav a:hover,
  [data-page="home"] .site-nav a[aria-current="page"] { color: white; }
  [data-page="home"] .hero { min-height: 600px; }
  .hero-center { padding: 125px 0 115px; }
  .hero-center h1 { font-size: clamp(39px, 6.8vw, 52px); }
  .hero-bottom { bottom: 30px; }
}

/* Responsive / interaction rule: (max-width: 560px). */
@media (max-width: 560px) {
  [data-page="home"] .hero { height: calc(100svh - 2 * var(--site-gutter)); min-height: 590px; }
  .hero-media img { object-position: 33% center; }
  .hero-shade { background: linear-gradient(90deg, #0e2b22cc, #17382ebf 50%, #0e2b22cc); }
  .hero-center { padding: 105px 0 90px; }
  .hero-center .eyebrow { font-size: 8px; line-height: 1.8; max-width: 315px; }
  .hero-center h1 { font-size: clamp(36px, 8.9vw, 43px); }
  .hero-center > p:not(.eyebrow) { font-size: 12px; max-width: 310px; }
  .hero-center .hero-actions { flex-direction: column; width: min(100%, 260px); }
  .hero-center .button { width: 100%; }
  .hero-bottom { bottom: 22px; font-size: 7px; }
}

/* Consistent product photography, scoped away from the homepage hero. */
.service-showcase > .container { max-width: 1200px; }
.section-featured > .container,
.catalog-section > .container,
.work-section > .container,
.about-story > .container { max-width: 1200px; }
.featured-grid,
.catalog-grid,
.work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
.work-lead { grid-row: auto; }
.work-wide { grid-column: auto; }
.service-card-image,
.product-image,
.catalog-grid .product-image,
.catalog-grid .product-card:last-child .product-image,
.work-image,
.work-lead .work-image,
.work-wide .work-image,
.about-story-photo,
.contact-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 6px;
  background: #f0f0eb;
}
.service-card-image img,
.product-image img,
.work-image img,
.about-story-photo img,
.contact-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}
.product-image,
.catalog-grid .product-image,
.catalog-grid .product-card:last-child .product-image,
.work-image,
.work-lead .work-image,
.work-wide .work-image,
.about-story-photo,
.contact-photo { aspect-ratio: 4 / 3; }
.product-card:hover .product-image img,
.work-tile button:hover img { transform: none; }
.about-story-photo { max-width: none; justify-self: stretch; }
.contact-photo { max-width: none; }
.dialog-image { position: relative; min-width: 0; background: #f0f0eb; }
.dialog-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.dialog-gallery { display: grid; grid-template-rows: minmax(0, 1fr) 82px; min-width: 0; min-height: 470px; background: #f0f0eb; }
.dialog-gallery:not(.has-gallery) { grid-template-rows: minmax(0, 1fr); }
.dialog-gallery .dialog-image { min-height: 0; overflow: hidden; }
.dialog-gallery-arrow { position: absolute; z-index: 1; top: 50%; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; transform: translateY(-50%); border: 0; border-radius: 50%; background: #fff; color: var(--forest); font-size: 27px; line-height: 1; box-shadow: 0 2px 12px #14251a22; cursor: pointer; }
.dialog-gallery-arrow:hover, .dialog-gallery-arrow:focus-visible { background: var(--forest); color: white; }
.dialog-gallery-previous { left: 16px; }
.dialog-gallery-next { right: 16px; }
.dialog-gallery-count { position: absolute; right: 16px; bottom: 98px; padding: 7px 10px; border-radius: 16px; background: #fff; color: var(--forest); font-size: 10px; letter-spacing: .08em; }
.dialog-gallery-thumbnails { display: flex; gap: 9px; align-items: center; min-width: 0; padding: 10px 14px; overflow-x: auto; background: #f0f0eb; }
.dialog-gallery-thumbnails button { flex: 0 0 70px; width: 70px; height: 60px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 4px; background: white; cursor: pointer; }
.dialog-gallery-thumbnails button[aria-pressed="true"] { border-color: var(--forest); }
.dialog-gallery-thumbnails img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Responsive / interaction rule: (max-width: 760px). */
@media (max-width: 760px) {
  .service-card-grid { max-width: none; }
  .featured-grid, .catalog-grid, .work-grid { gap: 28px 20px; }
}
/* Responsive / interaction rule: (max-width: 560px). */
@media (max-width: 560px) {
  .featured-grid, .catalog-grid, .work-grid {
    grid-template-columns: 1fr;
    max-width: none;
    margin-inline: auto;
  }
  .contact-photo { display: block; max-width: none; margin-inline: auto; }
  .work-tile { margin-bottom: 0; }
  .dialog-image { height: auto; aspect-ratio: 1 / 1; }
}

/* Reference-inspired client section with replaceable sample brand marks. */
.client-showcase { padding: 80px 0; background: #fff; border: 0; }
.client-inner { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.65fr); gap: 80px; max-width: 1200px; align-items: center; }
.client-intro { display: block; }
.client-intro h2 { font-family: var(--sans); font-size: clamp(32px, 3.1vw, 44px); font-weight: 400; line-height: 1.3; letter-spacing: -.035em; margin: 0 0 22px; }
.client-intro h2 strong { font-weight: 750; }
.client-intro > p { max-width: 340px; color: var(--muted); font-size: 15px; line-height: 1.8; margin-bottom: 30px; }
.client-intro .client-button { display: inline-flex; padding: 13px 24px; border: 0; border-radius: 30px; background: var(--forest); color: white; font-size: 13px; font-weight: 600; gap: 20px; transition: background .2s; }
.client-intro .client-button:hover { background: #2c5844; }
.client-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 38px 24px; margin: 0; }
.brand-placeholder { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 56px; color: #303633; font-size: clamp(16px, 1.65vw, 23px); font-weight: 700; letter-spacing: -.045em; white-space: nowrap; }
.brand-placeholder svg { width: 29px; height: 29px; flex: 0 0 29px; color: var(--brand-color); }
.brand-placeholder:nth-child(3n) { font-weight: 500; }
.brand-placeholder:nth-child(4n + 2) { font-family: Georgia, serif; }
/* Responsive / interaction rule: (max-width: 1000px). */
@media (max-width: 1000px) {
  .client-inner { gap: 40px; grid-template-columns: 1fr 1.5fr; }
  .client-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; }
}
/* Responsive / interaction rule: (max-width: 760px). */
@media (max-width: 760px) {
  .client-showcase { padding: 56px 0; }
  .client-inner { grid-template-columns: 1fr; gap: 36px; }
  .client-intro { text-align: center; }
  .client-intro > p { margin-inline: auto; }
  .client-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Responsive / interaction rule: (max-width: 560px). */
@media (max-width: 560px) {
  .client-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 10px; }
  .brand-placeholder { font-size: 16px; gap: 4px; }
  .brand-placeholder svg { width: 23px; height: 23px; flex-basis: 23px; }
}
/* Responsive / interaction rule: (max-width: 360px). */
@media (max-width: 360px) {
  .client-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Each row loops independently; the middle row travels in reverse. */
.client-logos {
  display: block;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.client-logo-track {
  display: flex;
  width: max-content;
  animation: client-logo-scroll 32s linear infinite;
}
.client-logo-track:nth-child(2) { animation-direction: reverse; }
.client-logo-group {
  display: grid;
  grid-template-columns: repeat(4, 140px);
  grid-template-rows: 56px;
  align-items: center;
  flex: 0 0 auto;
  gap: 32px 40px;
  /* Match the trailing gap so duplicated rows loop seamlessly. */
  padding: 8px 20px 8px 0;
}
.client-logo-group .brand-placeholder { font-size: 23px; }
/* Responsive / interaction rule: (max-width: 560px). */
@media (max-width: 560px) {
  .client-logo-group {
    grid-template-columns: repeat(4, 115px);
    gap: 24px 12px;
    padding-right: 12px;
  }
  .client-logo-group .brand-placeholder { font-size: 19px; }
}
/* Animation: move one duplicated group width to loop without a gap. */
@keyframes client-logo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Responsive / interaction rule: (prefers-reduced-motion: reduce). */
@media (prefers-reduced-motion: reduce) {
  .client-logos { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .client-logo-track { animation: none; }
  .client-logo-group[aria-hidden="true"] { display: none; }
}

/* Keep the complete personal gift set and mug visible in both card states. */
.service-card[href="collections.html#personal"] .service-card-image img { object-fit: contain; }
.service-card[href="collections.html#personal"] .service-card-image { background: #fff; }

.hero-media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: blur(2px); transform: scale(1.02); }

/* Homepage selected projects: a balanced four-card gallery. */
[data-page="home"] .selected-work { padding: 76px 0; background: #f0f2ec; }
.selected-work-layout { max-width: 1200px; }
.selected-work-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 34px; }
.selected-work-heading .eyebrow { color: #586f5c; margin: 0 0 15px; }
.selected-work-heading h2 { margin: 0 0 15px; font-size: clamp(32px, 3.3vw, 46px); line-height: 1.15; letter-spacing: -.05em; }
.selected-work-heading h2 em { color: #718568; }
.selected-work-heading p:not(.eyebrow) { margin: 0; color: #5c6d60; font-size: 13px; line-height: 1.8; }
.selected-work-link { display: inline-flex; flex-shrink: 0; align-items: center; gap: 24px; padding: 12px 18px; border: 1px solid #9faf9e; border-radius: 24px; font-size: 12px; color: var(--forest); transition: background .2s, color .2s; }
.selected-work-link:hover { background: var(--forest); color: white; }
.selected-work-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.selected-project { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; padding: 8px; color: var(--forest); background: #fafbf7; border: 1px solid #dce2d6; border-radius: 9px; text-align: left; transition: box-shadow .25s, border-color .25s; }
.selected-project-image { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 5px; background: #e5e9e0; }
.selected-project-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.selected-project-copy { display: flex; flex: 1; flex-direction: column; align-items: start; gap: 10px; min-width: 0; width: 100%; padding: 20px 10px 10px; }
.selected-project-copy small { color: #5a715e; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.selected-project-copy strong { font-size: 19px; font-weight: 500; line-height: 1.35; letter-spacing: -.035em; }
.selected-project-copy > span { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: auto; padding-top: 17px; font-size: 11px; color: #516950; }
.selected-project-copy > span span { font-size: 18px; }
.selected-project-number { position: absolute; top: 19px; left: 19px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fafbf7ed; color: var(--forest); font-size: 9px; letter-spacing: .06em; }
.selected-project:focus-visible, .selected-work-link:focus-visible { outline: 2px solid var(--forest); outline-offset: 5px; }
/* Responsive / interaction rule: (hover: hover). */
@media (hover: hover) {
  .selected-project:hover { border-color: #a7b79d; box-shadow: 0 8px 24px #193b3010; }
  .selected-project:hover .selected-project-image img { transform: scale(1.035); }
}
/* Responsive / interaction rule: (max-width: 1000px). */
@media (max-width: 1000px) {
  .selected-work-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .selected-project-image { aspect-ratio: 4 / 3; }
}
/* Responsive / interaction rule: (max-width: 600px). */
@media (max-width: 600px) {
  [data-page="home"] .selected-work { padding: 48px 0; }
  .selected-work-heading { flex-direction: column; align-items: start; gap: 22px; margin-bottom: 26px; }
  .selected-work-list { gap: 14px; }
  .selected-project { padding: 6px; }
  .selected-project-image { aspect-ratio: 1 / 1; }
  .selected-project-copy { padding: 15px 5px 7px; gap: 8px; }
  .selected-project-copy small { font-size: 8px; letter-spacing: .04em; }
  .selected-project-copy strong { font-size: 16px; }
  .selected-project-number { top: 14px; left: 14px; width: 24px; height: 24px; }
}
/* Responsive / interaction rule: (max-width: 359px). */
@media (max-width: 359px) {
  .selected-work-list { grid-template-columns: 1fr; }
  .selected-project-image { aspect-ratio: 4 / 3; }
}
/* Responsive / interaction rule: (prefers-reduced-motion: reduce). */
@media (prefers-reduced-motion: reduce) {
  .selected-project, .selected-work-link, .selected-project-image img { transition: none; }
  .selected-project:hover .selected-project-image img { transform: none; }
}

/* Responsive finishing across the shared pages. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
.container > *, .form-row > *, .dialog-layout > * { min-width: 0; }
h1, h2, h3, .product-details, .work-info, .selected-project-copy { overflow-wrap: anywhere; }
.button { max-width: 100%; white-space: normal; }
.button > span { flex-shrink: 0; }
.text-link, .selected-work-link, .hero-branding-link { min-height: 44px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.filter-list { min-width: 0; max-width: 100%; padding-top: 5px; }
.filter { min-height: 44px; }
.filter:focus-visible { outline-offset: -2px; }
.catalog-count { flex-shrink: 0; }
.work-grid { display: grid; }
.work-info { gap: 16px; }
.work-info > span:last-child { flex-shrink: 0; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea { min-width: 0; font-size: 16px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-links > div { gap: 4px; }
.item-dialog { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.dialog-close { width: 44px; height: 44px; top: 12px; right: 12px; }
.dialog-copy { padding: 60px 32px 36px; }
.dialog-copy .button { gap: 16px; }
.hero-media video { background: var(--forest-deep); }
/* Keep the hero pinned beneath the content overlay at every breakpoint.
   vh provides a fallback; svh avoids jumps as mobile browser bars retract. */
[data-page="home"] .hero {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}
/* Responsive / interaction rule: (max-width: 1000px). */
@media (max-width: 1000px) {
  .contact-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-top { gap: 40px; }
  .footer-links { gap: 40px; padding-right: 0; }
  .page-intro-inner { gap: 32px; }
}
/* Responsive / interaction rule: (max-width: 760px). */
@media (max-width: 760px) {
  html { scroll-padding-top: 84px; }
  .menu-toggle { width: 44px; height: 44px; padding: 10px; flex-shrink: 0; }
  .site-nav, [data-page="home"] .site-nav { max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow-y: auto; overscroll-behavior: contain; }
  .site-nav a, [data-page="home"] .site-nav a { font-size: 14px; min-height: 48px; }
  .contact-grid, .about-story-grid, .about-preview-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .contact-photo { max-width: 420px; margin-top: 24px; }
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .page-intro-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .page-intro-inner > p { max-width: 420px; margin: 0; }
  .process-grid { grid-template-columns: 1fr; gap: 12px; }
  .process-grid > div { padding: 24px 0 12px; }
  .process-grid h3 { margin-top: 16px; }
  .process-grid p { max-width: none; }
  .catalog-toolbar { flex-wrap: wrap; gap: 10px; }
  .catalog-count { display: none; }
  .dialog-layout { display: block; min-height: 0; }
  .dialog-gallery { display: grid; grid-template-rows: auto auto; min-height: 0; }
  .dialog-gallery:not(.has-gallery) { grid-template-rows: auto; }
  .dialog-image { height: auto; aspect-ratio: 4 / 3; max-height: 340px; }
  .dialog-gallery-thumbnails { padding: 7px 12px; }
  .dialog-gallery-thumbnails button { height: 56px; }
  .dialog-gallery-count { bottom: 90px; }
  .dialog-copy { padding: 28px; }
  .dialog-copy h2 { font-size: clamp(28px, 6vw, 40px); }
  .dialog-copy .eyebrow { margin-bottom: 14px; }
}
/* Responsive / interaction rule: (max-width: 560px). */
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .enquiry-form { padding: 24px 20px; }
  .footer-links { flex-wrap: wrap; gap: 28px 40px; }
  .footer-bottom { flex-wrap: wrap; }
  .hero-center > p:not(.eyebrow) { font-size: 14px; }
  .hero-center .button { font-size: 12px; min-height: 48px; }
  .selected-project-copy small { font-size: 10px; }
  .selected-project-copy > span { font-size: 12px; }
  .dialog-copy { padding: 26px 20px; }
  .dialog-image { aspect-ratio: 4 / 3; }
  .text-link { gap: 16px; white-space: normal; }
  .text-link:hover { gap: 20px; }
}
/* Responsive / interaction rule: (max-height: 500px) and (min-width: 561px). */
@media (max-height: 500px) and (min-width: 561px) {
  [data-page="home"] .hero { min-height: 520px; }
  .hero-center { padding-top: 110px; padding-bottom: 80px; }
  .hero-bottom { bottom: 28px; }
}

/* Homepage section alignment: use the same content edges as services/projects. */
[data-page="home"] .about-preview > .container,
[data-page="home"] .process-section > .container,
[data-page="home"] .cta-band > .container { max-width: 1200px; }
[data-page="home"] .about-preview-grid { align-items: center; }
[data-page="home"] .about-preview-grid > div:last-child { padding-bottom: 0; }
[data-page="home"] .process-section { background: var(--cream); }

/* Featured individual gifts: native horizontal carousel with visible controls. */
.featured-gifts { background: #f5f2e9; }
.featured-gifts > .container { max-width: 1200px; }
.featured-gifts-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 30px; }
.featured-gifts-heading .eyebrow { margin-bottom: 15px; }
.featured-gifts-heading h2 { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.15; margin-bottom: 14px; }
.featured-gifts-heading h2 em { color: #718568; }
.featured-gifts-heading p:not(.eyebrow) { color: #5c6d60; font-size: 13px; line-height: 1.7; margin: 0; }
.gift-controls { display: flex; gap: 8px; flex-shrink: 0; }
.gift-controls button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #a9b69f; border-radius: 50%; background: transparent; color: var(--forest); font-size: 20px; }
.gift-controls button:hover:not(:disabled) { background: var(--forest); color: white; }
.gift-controls button:disabled { opacity: .35; cursor: default; }
.gift-carousel { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 4); gap: 20px; list-style: none; margin: 0; padding: 6px 0 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #a6b49c #e4e7dc; }
.gift-slide { min-width: 0; scroll-snap-align: start; }
.gift-card { display: flex; height: 100%; flex-direction: column; }
.gift-card:focus-visible { outline-offset: -2px; }
.gift-art { display: block; aspect-ratio: 1 / 1; background: #e8eddf; border-radius: 6px; overflow: hidden; }
.gift-slide:nth-child(2n) .gift-art { background: #ece5d8; }
.gift-slide:nth-child(3n) .gift-art { background: #e5e9e1; }
.gift-art img { width: 100%; height: 100%; object-fit: contain; }
.gift-card-copy { display: flex; flex: 1; flex-direction: column; gap: 9px; padding: 18px 2px 0; }
.gift-card-copy strong { font-size: 20px; font-weight: 500; letter-spacing: -.035em; }
.gift-card-copy > span { font-size: 12px; color: #5c6d60; line-height: 1.6; }
.gift-card-copy .gift-enquire { display: flex; justify-content: space-between; align-items: center; color: var(--forest); min-height: 44px; margin-top: auto; border-bottom: 1px solid #bdc8b5; }
.gift-enquire > span { font-size: 18px; }
.gift-footnote { margin: 16px 0 0; font-size: 11px; color: #62705c; line-height: 1.6; }
@media (max-width: 1000px) {
  .gift-carousel { grid-auto-columns: calc((100% - 40px) / 3); }
}
@media (max-width: 760px) {
  .gift-carousel { grid-auto-columns: calc((100% - 20px) / 2); }
}
@media (max-width: 560px) {
  .featured-gifts-heading { align-items: start; flex-direction: column; gap: 20px; }
  .gift-carousel { grid-auto-columns: 78%; gap: 16px; }
}

/* Interactive catalogue: introductions, independent filters, and product batches. */
[data-page="collections"] .container { max-width: 1200px; }
.catalogue-page-intro h1 { font-size: clamp(38px, 4.7vw, 64px); line-height: 1.08; }
.catalogue-page-intro .page-intro-inner > p { max-width: 310px; margin-right: 0; }
.catalogue-jump { background: var(--cream); border-bottom: 1px solid var(--line); }
.catalogue-jump > .container { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.catalogue-jump a { display: flex; align-items: center; gap: 12px; padding: 24px 16px; font-size: 12px; line-height: 1.5; }
.catalogue-jump a + a { border-left: 1px solid var(--line); }
.catalogue-jump a > span:first-child { color: #758571; font-size: 10px; }
.catalogue-jump a > span:last-child { margin-left: auto; font-size: 18px; }
.catalogue-jump a:hover { background: #e8eee2; }
.catalogue-section { padding: 72px 0; background: var(--cream); }
.catalogue-section:nth-child(even) { background: #f0f2ec; }
/* html already reserves the shared header height through scroll-padding-top. */
.catalogue-section { scroll-margin-top: 18px; }
.catalogue-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px; align-items: center; margin-bottom: 35px; }
.catalogue-intro .eyebrow { margin-bottom: 18px; }
.catalogue-intro h2 { font-size: clamp(31px, 3.5vw, 46px); line-height: 1.13; margin: 0 0 20px; max-width: 520px; }
.catalogue-intro-copy > p:not(.eyebrow) { max-width: 470px; color: #5e6f61; font-size: 14px; line-height: 1.85; margin-bottom: 20px; }
.catalogue-intro-image { display: grid; place-items: center; height: 260px; background: white; border: 1px solid #e5e8df; border-radius: 8px; padding: 25px; }
.catalogue-intro-image img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.catalogue-filters { display: flex; flex-wrap: wrap; gap: 9px; padding: 24px 0; border-top: 1px solid #d4ddce; border-bottom: 1px solid #d4ddce; }
.catalogue-filters button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 16px; border: 1px solid #cbd6c4; border-radius: 24px; background: transparent; color: #425b46; font-size: 12px; line-height: 1.5; transition: background .18s, color .18s, border-color .18s; }
.catalogue-filters button:hover { background: #e2eadb; }
.catalogue-filters button[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: white; }
.catalogue-results-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; color: #5c6e5b; font-size: 11px; line-height: 1.6; }
.catalogue-results-bar p { margin: 0; }
.catalogue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.catalogue-card { min-width: 0; }
.catalogue-card > a { display: flex; height: 100%; flex-direction: column; border: 1px solid #dce3d6; border-radius: 7px; background: white; overflow: hidden; transition: border-color .2s; }
.catalogue-card > a:hover { border-color: #90a582; }
.catalogue-card-image { display: grid; place-items: center; height: 225px; padding: 20px; background: white; }
.catalogue-card-image img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.catalogue-card-copy { display: flex; flex: 1; flex-direction: column; gap: 9px; padding: 20px; border-top: 1px solid #edf0e8; }
.catalogue-card-copy small { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #61755e; line-height: 1.5; }
.catalogue-card-copy strong { font-size: 19px; font-weight: 500; line-height: 1.35; letter-spacing: -.025em; }
.catalogue-card-action { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 15px; font-size: 11px; color: #4e684e; }
.catalogue-card-action > span { font-size: 19px; }
.catalogue-request-art { display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center; width: 100%; height: 100%; background: #edf1e7; color: #627956; border-radius: 3px; text-align: center; }
.catalogue-request-art > span:first-child { font-size: 35px; }
.catalogue-request-art > span:last-child { font-family: var(--serif); font-style: italic; font-size: 23px; line-height: 1.25; }
.catalogue-more { display: flex; justify-content: center; padding-top: 30px; }
.catalogue-more .button { min-width: 180px; border-radius: 30px; }
.collection-personal { padding: 64px 0; scroll-margin-top: 18px; }
.collection-personal > .container { display: flex; justify-content: space-between; align-items: center; gap: 36px; }
.collection-personal h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; margin: 0 0 20px; }
.collection-personal h2 em { color: #718568; }
.collection-personal p:not(.eyebrow) { max-width: 520px; font-size: 14px; line-height: 1.75; color: #607063; margin: 0; }
.collection-personal .button { flex-shrink: 0; }
@media (max-width: 1000px) {
  .catalogue-jump > .container { display: flex; overflow-x: auto; padding: 4px 0; scrollbar-width: thin; }
  .catalogue-jump a { flex: 0 0 auto; min-height: 56px; padding: 15px; }
  .catalogue-jump a:focus-visible { outline-offset: -3px; }
  .catalogue-intro { gap: 32px; }
  .catalogue-card-image { height: 195px; padding: 16px; }
  .catalogue-grid { gap: 18px; }
}
@media (max-width: 760px) {
  .catalogue-section { padding: 48px 0; }
  .catalogue-intro { grid-template-columns: 1fr 1fr; gap: 24px; }
  .catalogue-intro h2 { font-size: 31px; }
  .catalogue-intro-image { height: 220px; padding: 18px; }
  .catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalogue-filters { flex-wrap: nowrap; overflow-x: auto; padding: 18px 3px; scrollbar-width: thin; }
  .catalogue-filters button { white-space: nowrap; flex-shrink: 0; }
  .catalogue-filters button:focus-visible { outline-offset: 2px; }
  .collection-personal > .container { flex-direction: column; align-items: start; }
}
@media (max-width: 560px) {
  .catalogue-intro { grid-template-columns: 1fr; gap: 22px; margin-bottom: 24px; }
  .catalogue-intro-image { height: 200px; }
  .catalogue-intro-copy > p:not(.eyebrow) { margin-bottom: 16px; }
  .catalogue-card-image { height: 170px; padding: 12px; }
  .catalogue-card-copy { padding: 14px; }
  .catalogue-card-copy strong { font-size: 16px; }
  .catalogue-grid { gap: 12px; }
  .catalogue-card-action { font-size: 10px; gap: 8px; }
  .catalogue-results-bar > span { display: none; }
  .collection-personal { padding: 44px 0; }
}
@media (max-width: 380px) {
  .catalogue-grid { grid-template-columns: 1fr; }
  .catalogue-card-image { height: 215px; }
}
@media (prefers-reduced-motion: reduce) {
  .catalogue-filters button, .catalogue-card > a { transition: none; }
}

/* Neutral foundation: charcoal copy and warm whites, with green as an accent.
   Keep brand greens for primary actions, selected filters, and small details. */
:root {
  --cream: #faf9f6;
  --ink: #262626;
  --muted: #686864;
  --line: #deded7;
}
body { color: var(--ink); }
h1, h2, h3 { color: inherit; }
.site-header, .logo-name, .site-nav a { color: var(--ink); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--forest); }
.service-card-bottom strong, .services-list a strong,
.product-details strong, .work-info strong, .selected-project,
.gift-card-copy strong, .catalogue-card-copy strong { color: var(--ink); }
.section-heading h2 em, .services-heading h2 em,
.selected-work-heading h2 em, .featured-gifts-heading h2 em,
.page-intro h1 em, .about-story-copy h2 em, .contact-aside h2 em,
.personal-panel h2 em, .collection-personal h2 em { color: #565650; }
.hero-description, .service-card-bottom > span, .product-details small,
.selected-work-heading p, .selected-project-copy small,
.page-intro-inner > p, .about-story-copy p:not(.eyebrow),
.contact-aside p:not(.eyebrow), .process-grid p,
.featured-gifts-heading p:not(.eyebrow), .gift-card-copy > span,
.gift-footnote, .catalogue-intro-copy > p:not(.eyebrow),
.catalogue-card-copy small, .catalogue-results-bar,
.collection-personal p:not(.eyebrow), .personal-panel p:not(.eyebrow),
.enquiry-form label, .form-note, .dialog-copy > p:not(.eyebrow) { color: var(--muted); }
.page-intro, .home-services, .process-section, .personal-panel,
[data-page="home"] .selected-work, .catalogue-section:nth-child(even) { background: #f2f1ed; }
.cta-band, .featured-gifts { background: #f5f3ee; }
.cta-band p:not(.eyebrow) { color: var(--muted); }
.selected-project { background: #fff; border-color: var(--line); }
.catalogue-card > a, .catalogue-intro-image { border-color: var(--line); }
.catalogue-filters { border-color: var(--line); }
.catalogue-filters button { color: #4f514c; border-color: #d0d2ca; }
.catalogue-filters button[aria-pressed="true"] { color: #fff; }
.gift-art, .gift-slide:nth-child(2n) .gift-art,
.gift-slide:nth-child(3n) .gift-art { background: #eeece6; }
.about-preview { background: #202321; color: #fff; }
.about-preview h2 em { color: var(--lime); }
.about-preview .eyebrow.light { color: #c9d8ce; }
.about-preview-grid p:not(.eyebrow) { color: #c9d8ce; }
.about-preview .button-outline { color: #fff; border-color: #899b80; }
.about-preview .button-outline:hover { background: var(--lime); color: var(--forest); }
.site-footer { background: #202321; }
.footer-top p, .footer-bottom { color: #b7bbb6; }
.footer-links a { color: #e1e3df; }
.footer-bottom { border-color: #424641; }
/* Keep white hero navigation legible while removing the green overlay tint. */
.hero-shade { background: linear-gradient(90deg, #141714b8, #171b17a8 50%, #141714b8); }
[data-page="home"] .site-header.is-scrolled { background: #202321f5; }
.hero-center h1, .hero-center h1 em { color: #fff; }
.hero-center > p:not(.eyebrow), .hero-center .eyebrow, .hero-bottom { color: #eceee9; }
@media (max-width: 760px) {
  [data-page="home"] .site-nav { background: #202321; }
  .site-nav a { color: var(--ink); }
}

/* Official supplied logos: light artwork on dark surfaces, dark on light. */
.site-header .logo { display: inline-flex; flex-shrink: 0; padding: 8px 0; min-height: 44px; }
.site-header .brand-logo { display: block; width: 190px; height: auto; object-fit: contain; }
.footer-logo { display: inline-block; max-width: 100%; }
.footer-logo img { display: block; width: 245px; max-width: 100%; height: auto; }
@media (max-width: 900px) and (min-width: 761px) {
  .site-header .brand-logo { width: 160px; }
  .site-nav { gap: 22px; }
}
@media (max-width: 760px) {
  .site-header .brand-logo { width: 135px; }
  .footer-logo img { width: 215px; }
}

/* Collection wayfinding: photo cards with clear category labels. */
.catalogue-jump { padding: 36px 0 40px; background: #252825; color: #fff; border-bottom: 0; }
.catalogue-jump > .container { display: block; overflow: visible; padding: 0; }
.collection-navigation-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.collection-navigation-heading .eyebrow { color: #bac7b4; margin-bottom: 9px; }
.collection-navigation-heading h2 { color: #fff; font-size: clamp(25px, 2.6vw, 34px); margin: 0; }
.collection-navigation-heading > p { color: #d0d3cd; font-size: 13px; line-height: 1.6; margin: 0; }
.collection-navigation-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.catalogue-jump .collection-navigation-options a { display: grid; grid-template-columns: 1fr 22px; align-content: start; align-items: start; gap: 12px 10px; padding: 14px; color: #272b25; background: #faf9f6; border: 2px solid transparent; border-radius: 6px; transition: background .2s, border-color .2s; }
.catalogue-jump .collection-navigation-options a + a { border-left: 2px solid transparent; }
.collection-navigation-image { grid-column: 1 / -1; grid-row: 1; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: #fff; }
.collection-navigation-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.collection-navigation-options strong { grid-column: 1; grid-row: 3; font-size: 18px; font-weight: 600; letter-spacing: -.025em; line-height: 1.3; }
.catalogue-jump .collection-navigation-arrow { grid-column: 2; grid-row: 3; font-size: 20px; margin: 0; }
.catalogue-jump .collection-navigation-options a:hover { background: #e9ede3; border-color: #acbe9c; }
.catalogue-jump .collection-navigation-options a[aria-current="location"] { background: #dce8d2; border-color: #8ba577; }
.catalogue-jump .collection-navigation-options a:focus-visible { outline: 2px solid white; outline-offset: 4px; }
@media (max-width: 1000px) {
  .collection-navigation-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .catalogue-jump { padding: 28px 0; }
  .collection-navigation-heading { flex-direction: column; align-items: start; gap: 12px; }
  .collection-navigation-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .catalogue-jump .collection-navigation-options a { padding: 10px; gap: 10px 8px; }
  .collection-navigation-options strong { font-size: 16px; }
}
@media (max-width: 359px) {
  .collection-navigation-options { grid-template-columns: 1fr; }
  .catalogue-jump .collection-navigation-options a { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .catalogue-jump .collection-navigation-options a { transition: none; }
}

/* Make collection filters easier to spot while keeping them in their current slot. */
[data-page="collections"] .catalogue-filters {
  gap: 10px;
  padding: 14px;
  border: 1px solid #c7d0c1;
  border-radius: 9px;
}
[data-page="collections"] .catalogue-filters button {
  min-height: 46px;
  padding: 10px 17px;
  border: 1.5px solid #9ba995;
  background: #fff;
  color: #303b31;
  font-size: 13px;
  font-weight: 600;
}
[data-page="collections"] .catalogue-filters button:hover {
  border-color: #405b42;
  background: #f7f9f5;
}
[data-page="collections"] .catalogue-filters button[aria-pressed="true"] {
  border-color: #263f2d;
  background: #263f2d;
  color: #fff;
}
[data-page="collections"] .catalogue-filters button:focus-visible {
  outline: 3px solid #718568;
  outline-offset: 2px;
}
@media (max-width: 760px) {
  [data-page="collections"] .catalogue-filters { padding: 12px 10px; }
}

/* Keep every section aligned to the same centered page edges. */
:root { --page-side-space: clamp(16px, 4vw, 56px); }
.container {
  width: min(calc(100% - var(--page-side-space) - var(--page-side-space)), 1200px);
  margin-inline: auto;
}

/* Desktop category submenu under Collections. */
.nav-collection-item { position: relative; }
.nav-collection-trigger { display: inline-flex; align-items: center; gap: 7px; }
.nav-chevron {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin: -4px 2px 0 1px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.nav-submenu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  left: -16px;
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 225px;
  padding: 8px;
  border: 1px solid #d8dfd5;
  border-radius: 7px;
  background: rgb(250 249 245 / 92%);
  box-shadow: 0 14px 34px #17251b26;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-submenu::before {
  position: absolute;
  top: -8px;
  right: 0;
  left: 0;
  height: 8px;
  content: "";
}
.nav-collection-item:hover .nav-submenu,
.nav-collection-item:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-nav .nav-submenu a,
[data-page="home"] .site-nav .nav-submenu a {
  display: flex;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 4px;
  color: #26352b;
  font-size: 12px;
  white-space: nowrap;
}
.site-nav .nav-submenu a:hover,
[data-page="home"] .site-nav .nav-submenu a:hover { background: #e8eee6; color: #193b30; }

/* Small-screen navigation slides in as a translucent, blurred side panel. */
@media (max-width: 760px) {
  .menu-toggle { position: relative; z-index: 3; }
  .site-nav,
  [data-page="home"] .site-nav {
    position: fixed;
    z-index: 2;
    inset: 0 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 72vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    padding: 96px 20px 28px;
    border-left: 1px solid rgb(255 255 255 / 22%);
    background: rgb(37 40 37 / 86%);
    box-shadow: -18px 0 45px #17251b20;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    visibility: hidden;
    transform: translateX(102%);
    transition: transform .28s ease, visibility .28s;
  }
  .site-nav.is-open,
  [data-page="home"] .site-nav.is-open {
    visibility: visible;
    transform: translateX(0);
  }
  .site-nav > a,
  [data-page="home"] .site-nav > a {
    justify-content: flex-start;
    padding: 12px 4px;
    color: #f4f4f0;
  }
  .nav-collection-item { width: 100%; }
  .site-nav .nav-collection-trigger,
  [data-page="home"] .site-nav .nav-collection-trigger {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 12px 4px;
    color: #f4f4f0;
  }
  .nav-submenu,
  .nav-collection-item:hover .nav-submenu,
  .nav-collection-item:focus-within .nav-submenu {
    position: static;
    display: flex;
    width: 100%;
    min-width: 0;
    padding: 0 0 8px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav-submenu::before { display: none; }
  .site-nav .nav-submenu a,
  [data-page="home"] .site-nav .nav-submenu a {
    min-height: 42px;
    padding: 9px 6px;
    color: #d2d6d1;
    font-size: 12px;
    white-space: normal;
  }
  .site-nav .nav-submenu a:hover,
  [data-page="home"] .site-nav .nav-submenu a:hover { background: rgb(255 255 255 / 10%); color: #fff; }
  .site-nav .nav-enquire,
  [data-page="home"] .site-nav .nav-enquire {
    justify-content: space-between;
    margin-top: 10px;
    padding: 12px;
    color: #f4f4f0;
    border-color: rgb(255 255 255 / 45%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-submenu, .site-nav { transition: none; }
}

/* Soft staggered reveal as content enters the viewport while scrolling. */
.scroll-reveal {
  opacity: 0;
  translate: 0 38px;
  filter: blur(3px);
  transition: opacity 700ms ease, translate 700ms cubic-bezier(.2, .75, .25, 1), filter 700ms ease;
  will-change: opacity, translate;
}
.scroll-reveal.is-revealed {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  will-change: auto;
}
.service-card:nth-child(2),
.collection-navigation-options > a:nth-child(2),
.catalogue-grid .product-card:nth-child(2),
.work-tile:nth-child(2),
.process-grid > div:nth-child(2) { transition-delay: 100ms; }
.service-card:nth-child(3),
.collection-navigation-options > a:nth-child(3),
.catalogue-grid .product-card:nth-child(3),
.work-tile:nth-child(3),
.process-grid > div:nth-child(3) { transition-delay: 190ms; }
.collection-navigation-options > a:nth-child(4),
.catalogue-grid .product-card:nth-child(4) { transition-delay: 280ms; }

@media (max-width: 600px) {
  .scroll-reveal { translate: 0 26px; filter: blur(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal.is-revealed {
    opacity: 1;
    translate: none;
    filter: none;
    transition: none;
    will-change: auto;
  }
}

/* Primary navigation hover and active-section indicator. */
.site-nav { position: relative; }
.site-nav::after {
  position: absolute;
  top: var(--nav-indicator-top, 0px);
  left: var(--nav-indicator-left, 0px);
  width: var(--nav-indicator-width, 0px);
  height: 2px;
  background: currentColor;
  content: "";
  pointer-events: none;
  transition: left .32s cubic-bezier(.2, .75, .25, 1), top .32s cubic-bezier(.2, .75, .25, 1), width .32s cubic-bezier(.2, .75, .25, 1);
}
.site-nav > a:not(.nav-enquire):hover,
.site-nav .nav-collection-trigger:hover,
.site-nav > a[aria-current="location"],
.site-nav .nav-collection-trigger[aria-current="location"] { color: inherit; }
.site-nav > a:focus-visible,
.site-nav .nav-collection-trigger:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }

@media (max-width: 760px) {
  .site-nav > a:focus-visible,
  .site-nav .nav-collection-trigger:focus-visible { outline-color: var(--lime); }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav::after { transition: none; }
}

/* Collection choices lift gently and reveal the product image on hover. */
.catalogue-jump .collection-navigation-options a {
  box-shadow: 0 0 0 transparent;
  transform: translateY(0);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.collection-navigation-image img {
  transition: transform .35s ease;
}
.collection-navigation-options .collection-navigation-arrow { transition: transform .24s ease; }
.catalogue-jump .collection-navigation-options a:hover,
.catalogue-jump .collection-navigation-options a:focus-visible {
  border-color: #c7d98a;
  box-shadow: 0 12px 24px rgb(0 0 0 / 18%);
  transform: translateY(-5px);
}
.collection-navigation-options a:hover .collection-navigation-image img,
.collection-navigation-options a:focus-visible .collection-navigation-image img {
  transform: scale(1.04);
}
.collection-navigation-options a:hover .collection-navigation-arrow,
.collection-navigation-options a:focus-visible .collection-navigation-arrow {
  transform: translateY(3px);
}
/* Give every catalogue filter the same gentle tactile feedback. */
.catalogue-filters button {
  box-shadow: 0 0 0 transparent;
  transform: translateY(0);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.catalogue-filters button:hover,
.catalogue-filters button:focus-visible {
  box-shadow: 0 6px 14px rgb(25 59 48 / 14%);
  transform: translateY(-2px);
}
.catalogue-filters button:active { transform: translateY(0) scale(.98); }
@media (prefers-reduced-motion: reduce) {
  .catalogue-jump .collection-navigation-options a,
  .collection-navigation-image img,
  .catalogue-filters button,
  .collection-navigation-options .collection-navigation-arrow { transition: none; }
  .catalogue-jump .collection-navigation-options a:hover,
  .catalogue-jump .collection-navigation-options a:focus-visible,
  .catalogue-filters button:hover,
  .catalogue-filters button:focus-visible,
  .catalogue-filters button:active,
  .collection-navigation-options a:hover .collection-navigation-image img,
  .collection-navigation-options a:focus-visible .collection-navigation-image img,
  .collection-navigation-options a:hover .collection-navigation-arrow,
  .collection-navigation-options a:focus-visible .collection-navigation-arrow { transform: none; }
}