/* ===== Tokens (taken from the reference screenshots) ===== */
:root {
  --gold: #F0B823;          /* buttons, "Arvee", active filter */
  --gold-dark: #D9A31A;
  --blue: #1F67AE;          /* logo blue – team designation */
  --blue-deep: #1B4F80;     /* products section */
  --blue-darker: #0F3157;
  --brown: #B9824F;         /* about section */
  --grey-hero: #A3A3A3;
  --grey-hero-dark: #8C8C8C;
  --text: #333333;
  --nav: #4A4A4A;
  --white: #FFFFFF;
  --container: 1240px;
  --radius: 22px;
  --fs-content: 17px;      /* one size for all paragraph copy, site-wide */
  --lh-content: 1.75;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Jost', sans-serif;
  color: var(--text);
  background: var(--white);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.gold { color: var(--gold); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; border-radius: 999px; transition: background .25s, transform .25s;
}
.btn--gold { background: var(--gold); color: var(--white); padding: 11px 26px; font-size: 15px; }
.btn--gold:hover { background: var(--gold-dark); transform: translateY(-2px); }
.btn--lg { padding: 13px 32px; font-size: 16px; }

.section-title {
  font-size: clamp(28px, 3.2vw, 40px); font-weight: 500; text-align: center;
  color: var(--text); margin-bottom: 40px;
}
.section-title--light { color: var(--white); }

/* ===== Header ===== */
.header {
  position: sticky; top: 0; z-index: 50; background: var(--white);
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 24px; }
.logo img { height: 48px; width: auto; }

.nav { display: flex; gap: 34px; }
.nav a { font-size: 16px; font-weight: 500; color: var(--nav); position: relative; padding: 6px 0; }
.nav a:not(.btn)::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--gold); transition: width .3s;
}
.nav a:not(.btn):hover::after, .nav a.active::after { width: 100%; }
.nav__cta-mobile { display: none; }

.burger { display: none; width: 44px; height: 36px; flex-direction: column; justify-content: space-between; padding: 4px 2px; }
.burger span { display: block; height: 5px; border-radius: 4px; background: #111; transition: transform .3s, opacity .3s; }
.burger.open span:nth-child(1) { transform: translateY(11.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-11.5px) rotate(-45deg); }

/* ===== Hero ===== */
.hero { position: relative; height: calc(100vh - 80px); min-height: 600px; max-height: 860px; overflow: hidden; color: var(--white); }
.slides, .slide { position: absolute; inset: 0; }
.slide {
  opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s;
  background-repeat: no-repeat; display: flex; align-items: center;
}
.slide.is-active { opacity: 1; visibility: visible; }

/* straw marquetry nightstands, studio shot (shown second) */
.slide--1 {
  background-color: #2A2A2A;
  background-image: url(../images/banners/hero-nightstands-wide.jpg);
  background-size: cover; background-position: right 70%;
}

/* slide 2: dark studio photo full-bleed */
.slide--2 {
  background-color: #1F1F1F;
  background-image: url(../images/banners/hero-shagreen-chest.jpg);
  background-size: cover; background-position: right 65%;
}

/* blue chest on its light studio backdrop (shown third): dark text, photo faded into the background */
/* pedal bins: pair on the grey, single bin as a tall panel on the right */
.slide--3 { background-color: #E8E8E8; color: var(--text); }
.slide--3::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 26%; width: 34%;
  background: url(../images/products/accessories/p-acc-bins-pair.jpg) center / contain no-repeat;
}
.slide--3::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 26%;
  background: url(../images/products/brass-accessories/p-acc-pedal-bin.jpg) center / cover no-repeat;
}
.slide--3 .slide__text { text-shadow: none; max-width: 440px; }
.hero:has(.slide--3.is-active) .hero__arrow svg { stroke: var(--text); }
.hero:has(.slide--3.is-active) .hero__count { color: var(--text); }

.slide__inner { position: relative; z-index: 1; padding-left: 110px; padding-right: 110px; }
.slide__text { max-width: 640px; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.slide__text h1 {
  font-size: clamp(32px, 3.4vw, 48px); font-weight: 500; line-height: 1.15; letter-spacing: -.5px;
  margin-bottom: 20px;
}
.slide__text p { font-size: clamp(16px, 1.2vw, 18px); font-weight: 400; line-height: 1.6; letter-spacing: .3px; max-width: 560px; margin-bottom: 34px; }
.slide.is-active .slide__text > * { animation: rise .9s both; }
.slide.is-active .slide__text p { animation-delay: .15s; }
.slide.is-active .slide__text .btn { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

.hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 70px; padding: 8px; }
.hero__arrow svg { width: 100%; height: 100%; fill: none; stroke: var(--white); stroke-width: 2.4; }
.hero__arrow--prev { left: 3%; }
.hero__arrow--next { right: 3%; }
.hero__count { position: absolute; right: 7%; bottom: 40px; z-index: 5; font-size: 20px; font-weight: 300; }
.hero__count .muted { opacity: .55; }

/* ===== About ===== */
.about {
  background-color: var(--brown);
  /* subtle paper texture like the reference */
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 4px 4px, 6px 6px; background-position: 0 0, 2px 3px;
  padding: 100px 0;
}
.about__inner { display: grid; grid-template-columns: 340px 1fr; gap: 70px; align-items: center; }
.about__founder { text-align: center; color: var(--white); }
.about__photo { width: 300px; height: 360px; border-radius: 50%; overflow: hidden; margin: 0 auto 26px; background: #f4f4f4; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__founder h4 { font-size: 18px; font-weight: 500; }
.about__founder span { font-size: 15px; font-weight: 400; letter-spacing: .5px; }
.about__text { color: var(--white); font-size: clamp(19px, 1.9vw, 26px); font-weight: 500; line-height: 1.45; }

/* ===== Products ===== */
.products {
  background: radial-gradient(ellipse at 70% 20%, #2A6FA8 0%, var(--blue-deep) 45%, var(--blue-darker) 100%);
  padding: 90px 0 110px;
}
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; max-width: 1100px; margin: 0 auto 56px; }
.filters button {
  color: var(--white); font-weight: 600; font-size: 16px; padding: 8px 16px; border-radius: 8px;
  transition: background .25s, color .25s;
}
.filters button:hover { color: var(--gold); }
.filters button.active { background: var(--gold); color: var(--white); }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 26px; }
.card {
  position: relative;
  background: #EDEDED; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); transition: transform .35s, box-shadow .35s;
}
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.card:hover img { transform: scale(1.06); }
.card__name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 16px 14px;
  background: linear-gradient(transparent, rgba(10,30,55,.8));
  color: var(--white); font-size: 16px; font-weight: 500; letter-spacing: .2px;
}
.card.hide { display: none; }
/* portrait pieces take two rows */
.card--tall { grid-row: span 2; aspect-ratio: auto; }
.card--tall img { position: absolute; inset: 0; }
.empty { text-align: center; color: var(--white); font-size: 18px; padding: 40px 0; }

/* ===== Team ===== */
.team { background: #F6F7F1; padding: 100px 0; }
.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 34px; }
.member { text-align: center; }
.member__img { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 4.3; margin-bottom: 22px; box-shadow: 0 10px 26px rgba(0,0,0,.12); }
.member__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform .6s; }
.member:hover .member__img img { transform: scale(1.05); }
.member h4 { color: var(--gold); font-size: 20px; font-weight: 500; letter-spacing: .3px; }
.member span { color: var(--blue); font-size: 15px; font-weight: 500; letter-spacing: .6px; }

/* ===== CTA ===== */
.btn--outline { border: 2px solid var(--white); color: var(--white); padding: 13px 38px; }
.btn--outline:hover { background: var(--white); color: var(--blue-deep); transform: translateY(-2px); }

.cta { color: var(--white); padding: 110px 0; }
.cta__inner { text-align: center; max-width: 860px; }
.cta h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 500; line-height: 1.2; margin-bottom: 18px; }
.cta p { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; opacity: .9; margin-bottom: 36px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

.cta--image {
  background-color: #3c3c3c;
  background-image: linear-gradient(rgba(30,30,30,.72), rgba(30,30,30,.72)), url(../images/banners/hero-nightstands.jpg);
  background-size: cover; background-position: center 65%; background-attachment: fixed;
}

.cta--blue { background: linear-gradient(110deg, var(--blue-darker), var(--blue-deep) 60%, #2A6FA8); padding: 80px 0; }
.cta__inner--split {
  max-width: var(--container); text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.cta__inner--split > div:first-child { max-width: 680px; }
.cta__inner--split p { margin-bottom: 0; }
.cta__inner--split .cta__actions { flex-shrink: 0; }

/* ===== Contact ===== */
.contact { background: #F6F7F1; padding: 100px 0; }
.contact__inner {
  display: grid; grid-template-columns: 1fr 1.6fr; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.12); background: var(--white); padding: 0;
  max-width: calc(var(--container) - 64px);
}
.contact__info {
  background: linear-gradient(160deg, var(--blue-deep), var(--blue-darker)); color: var(--white);
  padding: 56px 44px;
}
.contact__info h2 { font-size: clamp(28px, 2.8vw, 38px); font-weight: 500; margin-bottom: 16px; }
.contact__info p { font-size: 16px; line-height: 1.7; opacity: .9; margin-bottom: 36px; }
.contact__info ul { list-style: none; display: grid; gap: 20px; }
.contact__info li { font-size: 16px; font-weight: 500; }
.contact__info li span { display: block; color: var(--gold); font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 2px; }
.contact__info a:hover { color: var(--gold); }

.contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; padding: 56px 48px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 15px; font-weight: 500; color: var(--nav); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--text); background: #FAFAFA;
  border: 1.5px solid #DADADA; border-radius: 10px; padding: 13px 16px; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold); background: var(--white); box-shadow: 0 0 0 4px rgba(240,184,35,.18);
}
.field.invalid input, .field.invalid textarea { border-color: #D64545; }
.contact__submit { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.contact__submit .btn:disabled { opacity: .7; cursor: wait; transform: none; }
.form-status { font-size: 15px; font-weight: 500; }
.form-status.ok { color: #2E8B57; }
.form-status.err { color: #D64545; }

/* ===== Footer ===== */
.footer { background: #1A1A1A; color: #CFCFCF; padding: 70px 0 0; }
.footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-bottom: 50px; }
.footer__logo { height: 52px; background: #fff; padding: 6px 10px; border-radius: 8px; margin-bottom: 18px; }
.footer h5 { color: var(--white); font-size: 17px; font-weight: 600; margin-bottom: 16px; }
.footer__inner > div > a:not(.btn) { display: block; margin-bottom: 8px; transition: color .2s; }
.footer__inner > div > a:not(.btn):hover { color: var(--gold); }
.footer .btn { margin-top: 10px; }
.footer__copy { text-align: center; padding: 20px; border-top: 1px solid #2E2E2E; font-size: 14px; }

.to-top {
  position: fixed; left: 26px; bottom: 30px; z-index: 40; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 13px; font-weight: 500; color: var(--white); mix-blend-mode: difference;
  padding-bottom: 60px; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.to-top::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 2px; height: 50px; background: var(--gold); }
.to-top.show { opacity: 1; pointer-events: auto; }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .nav { gap: 26px; }
  .grid, .team__grid { grid-template-columns: repeat(3, 1fr); }
  .slide__inner { padding-left: 80px; padding-right: 80px; }
}

@media (max-width: 900px) {
  .header__inner { height: 68px; }
  .logo img { height: 40px; }
  .header__cta { display: none; }
  .burger { display: flex; }
  .nav {
    position: fixed; top: 68px; left: 0; right: 0; background: var(--white);
    flex-direction: column; align-items: center; gap: 22px; padding: 30px 16px 36px;
    box-shadow: 0 12px 20px rgba(0,0,0,.08);
    transform: translateY(-120%); transition: transform .35s ease; z-index: -1;
  }
  .nav.open { transform: none; }
  .nav__cta-mobile { display: inline-flex; }

  .hero { height: auto; min-height: 0; max-height: none; }
  .slides { position: relative; display: grid; }
  .slide { position: relative; grid-area: 1 / 1; min-height: 640px; padding: 90px 0 110px; }
  .slide--1 { background-image: url(../images/banners/hero-nightstands-mobile.jpg); background-size: cover; background-position: center bottom; align-items: flex-start; padding-top: 44px; }
  /* chest sits low, text goes in the dark space above it */
  .slide--2 { background-color: #1A1A1A; background-size: auto 66%; background-position: 74% bottom; align-items: flex-start; padding-top: 44px; }
  .slide--3 { align-items: flex-start; padding-top: 44px; }
  .slide--3::before { top: auto; left: 0; right: auto; width: 60%; height: 50%; background-position: center bottom; }
  .slide--3::after { top: auto; width: 40%; height: 50%; }

  .about__inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .cta { padding: 80px 0; }
  .contact { padding: 70px 0; }
  .contact__inner { grid-template-columns: 1fr; }
  .contact__info, .contact__form { padding: 40px 28px; }
  .cta--image { background-attachment: scroll; }
  .cta__inner--split { flex-direction: column; text-align: center; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__inner > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .slide__inner { padding-left: 44px; padding-right: 44px; }
  .slide__text h1 { font-size: 28px; }
  .slide__text p { font-size: 16px; }
  .btn--lg { padding: 12px 28px; font-size: 15px; }
  .hero__arrow { width: 26px; height: 50px; padding: 2px; }
  .hero__arrow--prev { left: 6px; }
  .hero__arrow--next { right: 6px; }
  .hero__count { font-size: 18px; bottom: 26px; }
  .about { padding: 70px 0; }
  .about__photo { width: 240px; height: 290px; }
  .about__text { font-size: 18px; }
  .filters button { font-size: 15px; padding: 6px 10px; }
  .grid { gap: 12px; }
  .card { border-radius: 14px; }
  .team__grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  .footer__inner { grid-template-columns: 1fr; }
  .to-top { display: none; }
  .cta { padding: 64px 0; }
  .cta__actions .btn { width: 100%; }
  .contact__inner { margin: 0 16px; width: auto; padding: 0; }
  .contact__form { grid-template-columns: 1fr; padding: 32px 20px; }
  .contact__info { padding: 36px 20px; }
  .contact__submit .btn { width: 100%; }
}
/* honeypot field, hidden from people */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===== Materials (home carousel) ===== */
.materials { background: #F6F7F1; padding: 100px 0; }
.materials__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 44px; }
.materials__head .section-title { text-align: left; margin-bottom: 10px; }
.materials__head p { font-size: 17px; color: #666; }
.materials__arrows { display: flex; gap: 12px; flex-shrink: 0; }
.mat-carousel__btn {
  width: 52px; height: 52px; border-radius: 50%; background: var(--gold);
  display: flex; align-items: center; justify-content: center; transition: background .25s, transform .25s;
}
.mat-carousel__btn svg { width: 22px; height: 22px; fill: none; stroke: var(--white); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mat-carousel__btn:hover { background: #2A6FA8; transform: translateY(-2px); }
.mat-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 26px) / 4); column-gap: 26px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px;
}
.mat-track::-webkit-scrollbar { display: none; }
.mat-slide { scroll-snap-align: start; display: block; }
.mat-slide__img { display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1; background: #EDEDED; margin-bottom: 18px; }
.mat-slide__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.mat-slide:hover .mat-slide__img img { transform: scale(1.05); }
.mat-slide__name { display: block; font-size: 19px; font-weight: 500; color: var(--text); transition: color .2s; }
.mat-slide:hover .mat-slide__name { color: var(--gold); }
.mat-slide__count { display: block; font-size: 13px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: #2A6FA8; margin-top: 4px; }
.materials__foot { text-align: center; margin-top: 50px; }

/* ===== Materials overview page ===== */
.mat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 26px; }
.mat-card { display: block; }
.mat-card__img { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1; background: #EDEDED; margin-bottom: 16px; }
.mat-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.mat-card:hover .mat-card__img img { transform: scale(1.04); }
.mat-card__body { display: block; }
.mat-card__name { display: block; font-size: 19px; font-weight: 500; color: var(--text); transition: color .2s; }
.mat-card:hover .mat-card__name { color: var(--gold); }
.mat-card__count { display: block; font-size: 13px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--blue); margin: 3px 0 8px; }
.mat-card__desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 15px; line-height: 1.55; color: #666;
}

.mat-more { background: #2A6FA8; color: var(--white); padding: 80px 0; }
.mat-more__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start; }
.mat-more h2 { font-size: clamp(28px, 2.8vw, 38px); font-weight: 400; margin-bottom: 14px; }
.mat-more p { font-size: 16px; line-height: 1.6; opacity: .9; margin-bottom: 28px; max-width: 380px; }
.mat-more ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; border-top: 1px solid rgba(255,255,255,.3); }
.mat-more li { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px; font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase; }

/* ===== Material detail page ===== */
.mat-hero { background: #2A6FA8; color: var(--white); padding: 60px 0 56px; }
.mat-back { display: inline-block; font-size: 15px; font-weight: 500; margin-bottom: 22px; opacity: .85; }
.mat-back:hover { color: var(--gold); opacity: 1; }
.mat-hero h1 { font-size: clamp(32px, 3.6vw, 48px); font-weight: 400; line-height: 1.1; margin-bottom: 14px; }
.mat-hero p { font-size: 17px; line-height: 1.6; max-width: 680px; opacity: .9; }
.mat-gallery { padding: 70px 0 90px; }
.mat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 26px; }
.mat-item__img { display: block; border-radius: 14px; overflow: hidden; background: #EDEDED; aspect-ratio: 1 / 1; }
.mat-item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.mat-item__img:hover img { transform: scale(1.04); }
.mat-item figcaption { margin-top: 12px; font-size: 15px; font-weight: 500; letter-spacing: .5px; color: var(--text); }
.mat-item figcaption em { font-style: normal; font-weight: 400; color: #777; margin-left: 6px; }
.mat-item figcaption small { display: block; font-size: 13px; font-weight: 400; color: #888; margin-top: 2px; }
.mat-pager { display: flex; justify-content: space-between; gap: 20px; margin-top: 70px; padding-top: 26px; border-top: 1px solid #E2E2E2; }
.mat-pager a { font-size: 16px; font-weight: 500; color: var(--nav); }
.mat-pager a:hover { color: var(--gold); }

.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(15,15,15,.92); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox figure { max-width: 86vw; text-align: center; }
.lightbox img { max-width: 86vw; max-height: 80vh; margin: 0 auto; border-radius: 6px; }
.lightbox figcaption { color: #E5E5E5; margin-top: 14px; font-size: 16px; letter-spacing: .5px; }
.lightbox__close { position: absolute; top: 18px; right: 26px; color: var(--white); font-size: 42px; line-height: 1; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); color: var(--white); font-size: 60px; padding: 10px 18px; }
.lightbox__prev { left: 10px; }
.lightbox__next { right: 10px; }
.lightbox button:hover { color: var(--gold); }

@media (max-width: 1100px) {
  .mat-track { grid-auto-columns: calc((100% - 2 * 22px) / 3); column-gap: 22px; }
  .mat-grid, .mat-cards { grid-template-columns: repeat(3, 1fr); }
  .mat-more__inner { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 700px) {
  .materials { padding: 70px 0; }
  .materials__head { align-items: flex-start; flex-direction: column; gap: 20px; margin-bottom: 30px; }
  .mat-carousel__btn { width: 44px; height: 44px; }
  .mat-track { grid-auto-columns: 78%; column-gap: 16px; }
  .mat-slide__name { font-size: 17px; }
  .materials__foot .btn { width: 100%; }
  .mat-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
  .mat-cards { grid-template-columns: repeat(2, 1fr); gap: 30px 14px; }
  .mat-card__name { font-size: 17px; }
  .mat-card__desc { display: none; }
  .mat-more { padding: 60px 0; }
  .mat-more ul { grid-template-columns: 1fr; }
  .lightbox__nav { font-size: 44px; padding: 6px 8px; }
}

/* ===== Products: home preview + full page ===== */
.products__more { text-align: center; margin-top: 50px; }
.products--page { padding-top: 56px; }
.products--page .mat-back { color: var(--white); }

/* ===== Products page: category accordion ===== */
.cat-acc { border-top: 1px solid rgba(255,255,255,.25); }
.cat { border-bottom: 1px solid rgba(255,255,255,.25); }
.cat summary {
  display: flex; align-items: center; gap: 18px; padding: 24px 4px;
  cursor: pointer; list-style: none; color: var(--white);
}
.cat summary::-webkit-details-marker { display: none; }
.cat__name { font-size: clamp(20px, 2vw, 26px); font-weight: 500; }
.cat__count { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; opacity: .7; margin-left: auto; }
.cat__icon { position: relative; width: 18px; height: 18px; flex: none; }
.cat__icon::before, .cat__icon::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--gold); transition: transform .3s; }
.cat__icon::after { transform: rotate(90deg); }
.cat[open] .cat__icon::after { transform: rotate(0); }
.cat summary:hover .cat__name { color: var(--gold); }
.cat .grid { padding: 6px 0 40px; }
.products--page .section-title { margin-bottom: 30px; }

/* ===== Materials page: full list (brown) ===== */
.mlist { background: #93705A; color: #F6F0E9; text-align: center; }
.mlist__title {
  font-size: clamp(56px, 9vw, 120px); font-weight: 200; letter-spacing: 2px; line-height: 1;
  text-transform: uppercase; padding: 60px 16px 70px; border-bottom: 3px solid #7E5E4A;
}
.mat-list li { border-bottom: 3px solid #7E5E4A; }
.mat-list a {
  display: block; padding: 46px 16px; font-size: clamp(26px, 3.4vw, 44px); font-weight: 200;
  letter-spacing: 1px; line-height: 1.1; text-transform: uppercase; transition: background .3s, letter-spacing .3s;
}
.mat-list a:hover { background: #876552; letter-spacing: 3px; }
.mat-preview {
  position: fixed; left: 0; top: 0; z-index: 60; width: 260px; height: 260px; object-fit: cover;
  border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0,0,0,.35);
  pointer-events: none; opacity: 0; transition: opacity .25s;
}
.mat-preview.show { opacity: 1; }
@media (max-width: 600px) {
  .mlist__title { padding: 44px 16px 50px; }
  .mat-list a { padding: 30px 16px; }
}

/* ===== Products page: masonry, full images, no frames ===== */
.grid--masonry { display: block; columns: 3 320px; column-gap: 1px; }
/* let the masonry run wider than the text container */
.products--page .grid--masonry { width: min(1600px, calc(100vw - 48px)); position: relative; left: 50%; transform: translateX(-50%); }
.grid--masonry .card {
  display: block; position: relative; break-inside: avoid; margin: 0 0 1px;
  aspect-ratio: auto; border-radius: 0; box-shadow: none; background: none; overflow: hidden;
}
.grid--masonry .card.hide { display: none; }
.grid--masonry .card img { position: static; display: block; width: 100%; height: auto; object-fit: initial; }
.grid--masonry .card:hover { transform: none; box-shadow: none; }
.grid--masonry .card:hover img { transform: none; opacity: .88; }
.grid--masonry .card img { transition: opacity .3s; }
.grid--masonry .card__name { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 12px; background: linear-gradient(transparent, rgba(0,0,0,.6)); font-size: 15px; }
@media (max-width: 600px) { .products--page .grid--masonry { width: 100%; left: 0; transform: none; } .grid--masonry { columns: 2; column-gap: 1px; } .grid--masonry .card__name { font-size: 13px; padding: 30px 10px 8px; } }

/* products page: fade-up on scroll, zoom cursor, full-screen slider */
.grid--masonry .card { cursor: zoom-in; opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.grid--masonry .card.is-in { opacity: 1; transform: none; }
.grid--masonry .card:hover img { opacity: .85; }
#productLightbox { background: rgba(12,12,12,.96); }
#productLightbox figure { max-width: 92vw; }
#productLightbox img { max-width: 92vw; max-height: 84vh; border-radius: 0; transition: opacity .18s ease; }
#productLightbox img.is-fading { opacity: 0; }
#productLightbox figcaption { display: flex; justify-content: center; gap: 18px; align-items: baseline; }
.lightbox__count { font-size: 13px; letter-spacing: 1px; opacity: .6; }

/* ===== Products page: effects (CSS only) ===== */
@keyframes pFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pZoomIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* heading and tabs ease in on load */
.products--page .mat-back,
.products--page .section-title { animation: pFadeUp .8s ease both; }
.products--page .filters { animation: pFadeUp .8s .15s ease both; }

/* tabs: soft lift + gold underline on hover */
.products--page .filters button { position: relative; transition: background .25s, color .25s, transform .25s; }
.products--page .filters button::after {
  content: ''; position: absolute; left: 50%; bottom: 2px; width: 0; height: 1px;
  background: var(--gold); transition: width .3s ease, left .3s ease;
}
.products--page .filters button:not(.active):hover { transform: translateY(-2px); }
.products--page .filters button:not(.active):hover::after { width: 60%; left: 20%; }

/* cards rise in with a reveal wipe */
.grid--masonry .card {
  clip-path: inset(14% 0 0 0);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), clip-path .9s cubic-bezier(.2,.7,.2,1);
}
.grid--masonry .card.is-in { clip-path: inset(0 0 0 0); }

/* hover: photo zooms slowly, the others dim, caption slides up with a gold rule */
.grid--masonry .card img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .5s ease, opacity .5s ease; }
.grid--masonry .card:hover img { transform: scale(1.06); opacity: 1; }
@media (hover: hover) {
  .grid--masonry:hover .card:not(:hover) img { filter: saturate(.6) brightness(.72); }
}
.grid--masonry .card__name { transform: translateY(6px); opacity: .9; transition: transform .45s ease, opacity .45s ease; }
.grid--masonry .card__name::after {
  content: ''; display: block; width: 0; height: 1px; margin-top: 8px;
  background: var(--gold); transition: width .5s ease;
}
.grid--masonry .card:hover .card__name { transform: none; opacity: 1; }
.grid--masonry .card:hover .card__name::after { width: 46px; }

/* full-screen slider opens with a fade and a gentle zoom */
#productLightbox:not([hidden]) { animation: pFade .35s ease both; }
#productLightbox:not([hidden]) figure { animation: pZoomIn .45s cubic-bezier(.2,.7,.2,1) both; }
#productLightbox .lightbox__nav, #productLightbox .lightbox__close { transition: color .25s, transform .25s; }
#productLightbox .lightbox__prev:hover { transform: translate(-4px, -50%); }
#productLightbox .lightbox__next:hover { transform: translate(4px, -50%); }
#productLightbox .lightbox__close:hover { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .products--page *, .products--page *::after { animation: none !important; transition: none !important; }
  .grid--masonry .card { opacity: 1; transform: none; clip-path: none; }
}
/* the wide masonry must never cause a sideways scroll */
.products--page { overflow-x: clip; }
html, body { overflow-x: clip; }

/* ===== Products page: equal-size grid, whole photo visible (no crop) ===== */
.grid--masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; columns: auto; }
.grid--masonry .card { margin: 0; aspect-ratio: 1 / 1; background: #F3F2EE; }
.grid--masonry .card img { width: 100%; height: 100%; object-fit: contain; padding: 5% 5% 14%; }
@media (max-width: 600px) {
  .grid--masonry { grid-template-columns: repeat(2, 1fr); }
  .grid--masonry .card img { padding: 6% 6% 32%; }
}
.grid--masonry .card__name { background: none; color: var(--text); padding: 0 14px 14px; text-align: center; }
@media (max-width: 600px) { .grid--masonry .card__name { padding: 0 8px 10px; } }
/* tall cards from the home layout must be normal squares here, so the grid never has holes */
.grid--masonry .card--tall { grid-row: auto; aspect-ratio: 1 / 1; }
.grid--masonry .card--tall img { position: static; }

/* ===== Products page: rounded photo cards (as per reference), 3 per row, large ===== */
.grid--masonry { grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid--masonry .card,
.grid--masonry .card--tall { aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: #2A2A2A; }
.grid--masonry .card img,
.grid--masonry .card--tall img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; padding: 0; }
.grid--masonry .card__name {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 70px 24px 22px; text-align: left; color: var(--white);
  font-size: 19px; font-weight: 500; line-height: 1.35;
  background: linear-gradient(transparent, rgba(16,30,48,.82));
}
@media (max-width: 900px) { .grid--masonry { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 600px) {
  .grid--masonry { grid-template-columns: 1fr; gap: 16px; }
  .grid--masonry .card, .grid--masonry .card--tall { border-radius: 16px; }
  .grid--masonry .card img, .grid--masonry .card--tall img { padding: 0; }
  .grid--masonry .card__name { font-size: 17px; padding: 60px 18px 16px; }
}

/* ===== Materials page (redesign): numbered list + sticky photo panel ===== */
.mx { background: #93705A; color: #F6F0E9; padding: 80px 0 110px; }
.mx__head { text-align: center; margin-bottom: 64px; }
.mx__eyebrow { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; opacity: .7; margin-bottom: 18px; }
.mx__title { font-size: clamp(60px, 10vw, 130px); font-weight: 200; letter-spacing: 4px; line-height: .95; text-transform: uppercase; }
.mx__intro { max-width: 620px; margin: 26px auto 0; font-size: 17px; line-height: 1.7; opacity: .85; }
.mx__body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 70px; align-items: start; }
.mx__list { border-top: 1px solid rgba(246,240,233,.25); }
.mx__list li { border-bottom: 1px solid rgba(246,240,233,.25); }
.mx__list a {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: baseline; gap: 18px;
  padding: 22px 6px; position: relative; transition: padding .35s ease, color .3s;
}
.mx__list a::before {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: #F2C14E; transition: width .5s ease;
}
.mx__num { font-size: 13px; letter-spacing: 1px; opacity: .55; }
.mx__name { font-size: clamp(24px, 2.6vw, 36px); font-weight: 200; letter-spacing: 1px; text-transform: uppercase; line-height: 1.1; }
.mx__meta { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .6; white-space: nowrap; }
.mx__thumb { display: none; }
.mx__list a:hover, .mx__list a.is-active { padding-left: 22px; color: #fff; }
.mx__list a:hover::before, .mx__list a.is-active::before { width: 100%; }
.mx__list a.is-active .mx__num, .mx__list a:hover .mx__num { opacity: 1; color: #F2C14E; }
.mx__view { position: sticky; top: 110px; }
.mx__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #7E5E4A; border-radius: 4px; }
.mx__frame img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease, transform 1.2s ease; }
.mx__frame img.is-fading { opacity: 0; transform: scale(1.04); }
.mx__empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 15px; letter-spacing: 3px; text-transform: uppercase; opacity: 0; transition: opacity .35s;
}
.mx__frame.is-empty img { opacity: 0; }
.mx__frame.is-empty .mx__empty { opacity: .75; }
.mx__caption { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; }
.mx__cname { font-size: 22px; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; }
.mx__cmeta { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .7; }
@media (max-width: 900px) {
  .mx { padding: 56px 0 70px; }
  .mx__head { margin-bottom: 40px; }
  .mx__body { grid-template-columns: 1fr; }
  .mx__view { display: none; }
  .mx__list a { grid-template-columns: 34px 1fr auto; padding: 16px 4px; align-items: center; }
  .mx__list a:hover, .mx__list a.is-active { padding-left: 4px; }
  .mx__meta { display: none; }
  .mx__thumb { display: block; width: 58px; height: 58px; object-fit: cover; border-radius: 3px; }
  .mx__name { font-size: 22px; }
}
.mx__list, .mx__list li { list-style: none; margin: 0; padding: 0; }

/* ===== About page ===== */
.page-hero { background: linear-gradient(135deg, #1B4F80, #2A6FA8); color: var(--white); padding: 56px 0 64px; text-align: center; }
.page-hero .mat-back { display: block; text-align: left; color: var(--white); }
.page-hero h1 { font-size: clamp(36px, 4.4vw, 56px); font-weight: 500; margin-bottom: 14px; animation: pFadeUp .8s ease both; }
.page-hero p { max-width: 640px; margin: 0 auto; font-size: 17px; line-height: 1.7; opacity: .9; animation: pFadeUp .8s .12s ease both; }

/* ===== About page (story layout) ===== */
.ab-hero { background: #93705A; color: #F6F0E9; padding: 50px 0 90px; text-align: center; }
.ab-hero .mat-back { display: block; text-align: left; color: #F6F0E9; }
.ab-eyebrow { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; opacity: .7; margin: 30px 0 18px; animation: pFadeUp .8s ease both; }
.ab-title { font-size: clamp(42px, 7vw, 96px); font-weight: 200; letter-spacing: 2px; line-height: 1.05; text-transform: uppercase; animation: pFadeUp .9s .1s ease both; }
.ab-section { padding: 100px 0; }
.ab-heading { font-size: clamp(30px, 3.4vw, 46px); font-weight: 300; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 26px; color: var(--text); }
.ab-heading--center { text-align: center; }
.ab-lead { max-width: 720px; margin: 0 auto; text-align: center; font-size: 18px; line-height: 1.8; color: #555; }
.ab-story { background: #F6F7F1; }
.ab-story__inner { display: grid; grid-template-columns: 320px 1fr; gap: 80px; align-items: center; }
.ab-founder { text-align: center; }
.ab-founder h4 { font-size: 18px; font-weight: 500; }
.ab-founder span { font-size: 13px; letter-spacing: 1.5px; color: #777; }
.ab-copy p { font-size: 17px; line-height: 1.85; color: #4A4A4A; margin-bottom: 18px; }
.ab-brief { background: #fff; }
.ab-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.ab-gallery figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; }
.ab-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.ab-gallery figure:hover img { transform: scale(1.05); }
.ab-gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 22px 18px; color: #fff;
  font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
}
.ab-philosophy { background: #93705A; color: #F6F0E9; }
.ab-philosophy .ab-heading { color: #F6F0E9; margin-bottom: 8px; }
.ab-philosophy .ab-lead { color: #F6F0E9; opacity: .9; }
.ab-native { text-align: center; font-size: clamp(30px, 4vw, 52px); font-weight: 300; margin-bottom: 18px; opacity: .9; }
.ab-sub { text-align: center; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; opacity: .7; margin-bottom: 30px; }
@media (max-width: 900px) {
  .ab-section { padding: 70px 0; }
  .ab-story__inner { grid-template-columns: 1fr; gap: 40px; }
  .ab-copy { text-align: center; }
  .ab-gallery { grid-template-columns: 1fr; gap: 16px; }
  .ab-gallery figure { aspect-ratio: 4 / 3; }
}
/* about page: team block follows the same type as the other sections */
.ab-lead--team { margin-bottom: 56px; }
.team .member h4 { color: var(--text); font-weight: 500; margin-top: 4px; }
.team .member span { color: #8A6A55; font-size: 12px; letter-spacing: 1.8px; }
.ab-gallery figure:nth-child(2) img { object-position: 60% center; }

/* ===== Theme: logo blue + gold + cream across all pages ===== */
.mx, .mlist, .ab-hero, .ab-philosophy {
  background: radial-gradient(ellipse at 70% 20%, #2A6FA8 0%, var(--blue-deep) 45%, var(--blue-darker) 100%);
  color: #fff;
}
.mx__list, .mx__list li { border-color: rgba(255,255,255,.18); }
.mx__list a::before { background: var(--gold); }
.mx__list a.is-active .mx__num, .mx__list a:hover .mx__num { color: var(--gold); }
.mx__frame { background: var(--blue-darker); }
.mat-list li, .mlist__title { border-color: rgba(255,255,255,.18); }
.mat-list a:hover { background: rgba(255,255,255,.06); }
.ab-hero .mat-back, .ab-philosophy .ab-heading { color: #fff; }
.ab-eyebrow, .mx__eyebrow, .ab-sub { color: var(--gold); opacity: 1; }
.ab-philosophy .ab-lead { color: #fff; }
.ab-native { color: var(--gold); opacity: 1; }
.ab-heading::after {
  content: ''; display: block; width: 46px; height: 2px; background: var(--gold); margin-top: 16px;
}
.ab-heading--center::after { margin-left: auto; margin-right: auto; }
.ab-philosophy .ab-heading::after { display: none; }
.team .member span { color: var(--blue); }
/* About section (founder card) was brown: use the blue theme */
.about { background: radial-gradient(ellipse at 70% 20%, #2A6FA8 0%, var(--blue-deep) 45%, var(--blue-darker) 100%); }
.ab-hero__intro { max-width: 620px; margin: 22px auto 0; font-size: 17px; line-height: 1.7; opacity: .9; animation: pFadeUp .9s .2s ease both; }
.ab-philosophy .ab-heading::after { display: block; }
.ab-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 56px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.15); }
.ab-why__item { background: var(--blue-deep); padding: 36px 28px 40px; transition: background .35s; }
.ab-why__item:hover { background: #22609B; }
.ab-why__num { display: block; color: var(--gold); font-size: 14px; letter-spacing: 2px; margin-bottom: 18px; }
.ab-why__item h3 { font-size: 20px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; }
.ab-why__item p { font-size: 15px; line-height: 1.7; opacity: .85; }
@media (max-width: 900px) { .ab-why { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ab-why { grid-template-columns: 1fr; } }

/* ===== Home materials: centred heading, one large slide at a time ===== */
.materials__head { justify-content: center; text-align: center; }
.materials__head .section-title { text-align: center; }
.mat-track { grid-auto-columns: 100%; column-gap: 0; overflow-x: hidden; scroll-snap-type: none; }
.mat-slide { position: relative; }
.mat-slide__img { aspect-ratio: 21 / 9; border-radius: 18px; margin-bottom: 0; }
.mat-slide__img img { transition: transform 4s ease; }
.mat-slide:hover .mat-slide__img img { transform: scale(1.03); }
.mat-slide__name, .mat-slide__count { position: absolute; left: 40px; color: #fff; z-index: 1; }
.mat-slide__name { bottom: 62px; font-size: clamp(26px, 3vw, 40px); font-weight: 300; letter-spacing: 2px; text-transform: uppercase; }
.mat-slide:hover .mat-slide__name { color: #fff; }
.mat-slide__count { bottom: 36px; color: var(--gold); }
.mat-slide::after { content: ''; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(transparent 55%, rgba(10,25,45,.7)); pointer-events: none; }
.mat-dots { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.mat-dots button { width: 10px; height: 10px; border-radius: 50%; background: #C9CED6; padding: 0; transition: background .3s, width .3s; }
.mat-dots button.is-active { background: var(--gold); width: 28px; border-radius: 6px; }
@media (max-width: 600px) {
  .mat-track { grid-auto-columns: 100%; column-gap: 0; }
  .mat-slide__img { aspect-ratio: 4 / 3.4; border-radius: 14px; }
  .mat-slide::after { border-radius: 14px; }
  .mat-slide__name { left: 20px; bottom: 46px; font-size: 24px; }
  .mat-slide__count { left: 20px; bottom: 22px; }
}
.mat-carousel { overflow: hidden; border-radius: 18px; }
.mat-track { display: flex; overflow: visible; transition: transform .8s cubic-bezier(.65,0,.35,1); padding-bottom: 0; }
.mat-slide { flex: 0 0 100%; }
.mat-dots { position: relative; }
@media (max-width: 600px) { .mat-carousel { border-radius: 14px; } }

/* ===== Material pages: grouped by type ===== */
.mt-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 56px; position: sticky; top: 80px; z-index: 5; padding: 14px 0; background: var(--white); }
.mt-nav a { padding: 8px 16px; border: 1px solid #D5DCE6; border-radius: 30px; font-size: 14px; color: var(--text); transition: background .25s, color .25s, border-color .25s; }
.mt-nav a span { color: var(--gold-dark); font-size: 12px; margin-left: 4px; }
.mt-nav a:hover, .mt-nav a.is-active { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.mt-nav a:hover span, .mt-nav a.is-active span { color: var(--gold); }
.mt-group { margin-bottom: 70px; scroll-margin-top: 170px; }
.mt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid #D5DCE6; padding-bottom: 14px; margin-bottom: 28px; }
.mt-head h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue-deep); }
.mt-head h2::before { content: ''; display: inline-block; width: 28px; height: 2px; background: var(--gold); vertical-align: middle; margin-right: 14px; }
.mt-head span { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #8A8F98; }
.mx__types { display: block; margin-top: 6px; font-size: 12px; letter-spacing: 1px; text-transform: none; opacity: .7; font-weight: 300; }
@media (max-width: 600px) { .mt-nav { top: 68px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; } .mt-nav a { white-space: nowrap; } }
.mt-nav { scrollbar-width: none; } .mt-nav::-webkit-scrollbar { display: none; }

/* ===== Home materials slide: text panel + photo shown at its real resolution ===== */
.mat-slide { display: grid; grid-template-columns: 2fr 3fr; background: radial-gradient(ellipse at 20% 20%, #2A6FA8 0%, var(--blue-deep) 55%, var(--blue-darker) 100%); border-radius: 18px; overflow: hidden; }
.mat-slide::after { display: none; }
.mat-slide__body { display: flex; flex-direction: column; justify-content: center; padding: 48px 52px; color: #fff; }
.mat-slide__num { color: var(--gold); font-size: 14px; letter-spacing: 2px; margin-bottom: 18px; }
.mat-slide__name, .mat-slide__count { position: static; }
.mat-slide__name { font-size: clamp(30px, 3.2vw, 44px); font-weight: 300; letter-spacing: 2px; text-transform: uppercase; line-height: 1.1; color: #fff; }
.mat-slide__desc { margin: 18px 0 22px; font-size: 16px; line-height: 1.7; opacity: .85; }
.mat-slide__count { color: var(--gold); margin: 0 0 26px; }
.mat-slide__more { font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.4); align-self: flex-start; padding-bottom: 4px; transition: border-color .3s, color .3s; }
.mat-slide:hover .mat-slide__more { color: var(--gold); border-color: var(--gold); }
.mat-slide__img { aspect-ratio: 4 / 3; border-radius: 0; background: var(--blue-darker); }
.mat-slide__img img { image-rendering: auto; }
@media (max-width: 900px) {
  .mat-slide { grid-template-columns: 1fr; }
  .mat-slide__img { order: -1; aspect-ratio: 4 / 3; }
  .mat-slide__body { padding: 26px 22px 30px; }
  .mat-slide__desc { font-size: 15px; margin: 12px 0 16px; }
  .mat-slide__count { margin-bottom: 18px; }
}

/* ===== Home page effects ===== */
/* hero: text lines rise in turn */
.slide.is-active .slide__text h1 { animation: fxUp .9s .15s cubic-bezier(.2,.7,.2,1) both; }
.slide.is-active .slide__text p { animation: fxUp .9s .35s cubic-bezier(.2,.7,.2,1) both; }
.slide.is-active .slide__text .btn { animation: fxUp .9s .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fxUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* header gets slimmer once the page scrolls */
.header { transition: box-shadow .3s, background .3s; }
.header__inner { transition: height .35s ease; }
.logo img { transition: height .35s ease; }
.header.is-scrolled { box-shadow: 0 6px 24px rgba(15,49,87,.12); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
.header.is-scrolled .header__inner { height: 66px; }
.header.is-scrolled .logo img { height: 40px; }

/* scroll reveal */
.fx { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.fx.fx-in { opacity: 1; transform: none; }

/* gold buttons: light sweep on hover */
.btn--gold { position: relative; overflow: hidden; }
.btn--gold::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.btn--gold:hover::after { left: 120%; }

/* product cards: lift with a soft glow */
.products:not(.products--page) .card { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; }
.products:not(.products--page) .card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(0,0,0,.35); }

/* section headings: gold rule draws in */
.section-title::after { content: ''; display: block; width: 0; height: 2px; background: var(--gold); margin: 14px auto 0; transition: width .9s .2s ease; }
.fx-in .section-title::after, .section-title.fx-in::after { width: 56px; }
.materials__head .section-title::after { margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  .fx { opacity: 1; transform: none; transition: none; }
  .slide.is-active .slide__text > * { animation: none; }
}
.footer__logo { background: none; padding: 0; border-radius: 0; height: 56px; width: auto; }
.ab-quote { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.7; font-weight: 300; color: var(--text); }
.ab-work { background: #fff; padding-bottom: 40px; }
.ab-work__inner { display: grid; grid-template-columns: 320px 1fr; gap: 80px; align-items: start; }
.ab-sub--left { text-align: left; color: var(--gold-dark); margin-bottom: 14px; }
@media (max-width: 900px) { .ab-work__inner { grid-template-columns: 1fr; gap: 10px; } .ab-work__title, .ab-sub--left { text-align: center; } .ab-work .ab-heading::after { margin-left: auto; margin-right: auto; } }
/* team members without a photo yet: monogram tile in theme colours */
.member__img { position: relative; background: radial-gradient(ellipse at 30% 20%, #2A6FA8 0%, var(--blue-deep) 60%, var(--blue-darker) 100%); }
.member__ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: clamp(40px, 4vw, 58px); font-weight: 200; letter-spacing: 4px; }
.team__grid { grid-template-columns: repeat(4, 1fr); }
.team .member .member__ini { color: var(--gold); font-size: clamp(40px, 4vw, 58px); letter-spacing: 4px; font-weight: 200; }
@media (max-width: 1100px) { .team__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .team__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; } }
/* director block: photo on the right, mirror of Our Story */
.ab-story--flip { background: #fff; }
.ab-story--flip .ab-story__inner { grid-template-columns: 1fr 320px; }
.ab-story--flip .ab-founder { order: 2; }
.ab-story--flip .ab-copy { text-align: right; }
.ab-story--flip .ab-heading::after { margin-left: auto; }
.ab-story--flip .about__photo img { object-position: center 30%; }
@media (max-width: 900px) {
  .ab-story--flip .ab-story__inner { grid-template-columns: 1fr; }
  .ab-story--flip .ab-founder { order: 0; }
  .ab-story--flip .ab-copy { text-align: center; }
  .ab-story--flip .ab-heading::after { margin-left: auto; margin-right: auto; }
}
.ab-work { background: #F6F7F1; padding-bottom: 100px; }

/* ===== Products page: blue hero band + light catalogue ===== */
.pr-hero { padding-bottom: 80px; }
.products--page { background: #F6F7F1; padding-top: 0; }
.products--page .filters {
  position: sticky; top: 66px; z-index: 6; max-width: none; margin: 0 0 40px;
  padding: 22px 0; background: rgba(246,247,241,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid #E2E5EA;
}
.products--page .filters button {
  color: var(--blue-deep); font-weight: 500; font-size: 14px; padding: 9px 18px;
  border: 1px solid #D5DCE6; border-radius: 30px; background: #fff;
}
.products--page .filters button:hover { color: #fff; background: var(--blue-deep); border-color: var(--blue-deep); transform: translateY(-2px); }
.products--page .filters button.active { color: var(--blue-darker); background: var(--gold); border-color: var(--gold); }
.products--page .filters button::after { display: none; }
.products--page .grid--masonry .card { background: #E9ECF0; box-shadow: 0 10px 30px rgba(15,49,87,.10); }
.products--page .grid--masonry .card:hover { box-shadow: 0 22px 46px rgba(15,49,87,.22); }
.products--page .empty { color: var(--text); }
@media (max-width: 600px) {
  .products--page .filters { top: 60px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 14px 0; margin-bottom: 24px; }
  .products--page .filters::-webkit-scrollbar { display: none; }
  .products--page .filters button { white-space: nowrap; flex: none; }
}
/* tabs scroll with the page; active tab text white */
.products--page .filters { position: static; backdrop-filter: none; background: none; }
.products--page .filters button.active { color: #fff; }

/* ===== Materials page: blue hero + light list ===== */
.mx-hero { padding-bottom: 80px; }
.mx { background: #F6F7F1; color: var(--text); padding: 70px 0 110px; }
.mx__list { border-top: 1px solid #DCE1E8; }
.mx__list li { border-bottom: 1px solid #DCE1E8; }
.mx__list a { color: var(--text); }
.mx__num { color: var(--blue); opacity: .7; }
.mx__meta { color: #7A808A; opacity: 1; }
.mx__list a:hover, .mx__list a.is-active { color: var(--blue-deep); background: #fff; }
.mx__list a.is-active .mx__num, .mx__list a:hover .mx__num { color: var(--gold-dark); }
.mx__types { color: #7A808A; opacity: 1; }
.mx__view { background: #fff; padding: 18px; border-radius: 18px; box-shadow: 0 18px 44px rgba(15,49,87,.12); }
.mx__frame { aspect-ratio: 4 / 3; border-radius: 12px; background: radial-gradient(ellipse at 30% 20%, #2A6FA8 0%, var(--blue-deep) 60%, var(--blue-darker) 100%); }
.mx__empty { color: var(--gold); }
.mx__caption { padding: 4px 4px 0; }
.mx__cname { color: var(--blue-deep); }
.mx__cmeta { color: var(--gold-dark); opacity: 1; }
.mx__cta { display: block; text-align: center; margin: 18px 4px 4px; }
.mx__thumb { border-radius: 6px; }
/* home materials: prev/next buttons on the slider */
.mat-carousel { position: relative; }
.mat-arrow {
  position: absolute; top: 50%; z-index: 3; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%;
  background: var(--gold); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.25); transition: transform .25s, background .25s;
}
.mat-arrow svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mat-arrow--prev { left: 18px; }
.mat-arrow--next { right: 18px; }
.mat-arrow:hover { background: var(--gold-dark); transform: scale(1.08); }
@media (max-width: 900px) {
  .mat-arrow { width: 42px; height: 42px; margin-top: 0; top: calc((100vw - 32px) * .375 - 21px); }
  .mat-arrow--prev { left: 10px; } .mat-arrow--next { right: 10px; }
}
@media (min-width: 901px) {
  .mat-arrow { top: auto; bottom: 26px; margin-top: 0; }
  .mat-arrow--next { right: 26px; }
  .mat-arrow--prev { left: auto; right: 90px; }
}

/* ===== Home: simple contact form ===== */
.contact--simple { background: #F6F7F1; }
.cs-head { text-align: center; margin-bottom: 40px; }
.cs-head .section-title { margin-bottom: 14px; }
.cs-head p { font-size: 17px; color: #666; }
.cs-form { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 22px; }
.cs-form .field label { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: #6B7280; }
.cs-form .field input, .cs-form .field textarea {
  background: #fff; border: 1px solid #DCE1E8; border-radius: 10px; padding: 14px 16px; font-size: 16px;
}
.cs-form .field input:focus, .cs-form .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,103,174,.12); outline: none; }
.cs-submit { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 6px; }
.cs-submit .btn { min-width: 220px; }
@media (max-width: 600px) { .cs-form { grid-template-columns: 1fr; } .cs-submit .btn { width: 100%; } }
.ab-story .ab-copy .ab-quote + p { margin-top: 18px; }

/* about page: team on the blue theme so it stands apart from "What We Do" */
.team {
  background: radial-gradient(ellipse at 70% 20%, #2A6FA8 0%, var(--blue-deep) 45%, var(--blue-darker) 100%);
}
.team .ab-heading { color: #fff; }
.team .ab-lead { color: rgba(255,255,255,.85); }
.team .member h4 { color: #fff; }
.team .member span { color: var(--gold); }
.team .member__img { box-shadow: 0 16px 36px rgba(0,0,0,.35); background: rgba(255,255,255,.08); }
.team .member__ini { background: rgba(255,255,255,.06); }
.team .team__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 34px; }
.team .team__grid .member { flex: 0 0 calc((100% - 3 * 34px) / 4); }
@media (max-width: 1100px) { .team .team__grid .member { flex-basis: calc((100% - 2 * 34px) / 3); } }
@media (max-width: 900px) { .team .team__grid { gap: 28px 18px; } .team .team__grid .member { flex-basis: calc((100% - 18px) / 2); } }

/* about page team: warm champagne-gold instead of blue */
.team { background: linear-gradient(160deg, #F7EED9 0%, #EEDFBC 100%); }
.team .ab-heading { color: var(--blue-darker); }
.team .ab-heading::after { background: var(--blue-deep); }
.team .ab-lead { color: #6B5A3A; }
.team .member h4 { color: var(--blue-darker); }
.team .member span { color: #9A7418; }
.team .member__img { box-shadow: 0 16px 34px rgba(120,90,30,.22); background: radial-gradient(ellipse at 30% 20%, #2A6FA8 0%, var(--blue-deep) 60%, var(--blue-darker) 100%); }
.team .member__ini { background: none; }

/* home contact: heading on top, one white form card (no blue side box) */
.contact__inner--single { display: block; max-width: 820px; background: none; box-shadow: none; overflow: visible; border-radius: 0; }
.contact__head { text-align: center; margin-bottom: 36px; }
.contact__head .section-title { margin-bottom: 14px; }
.contact__head p { font-size: 17px; color: #666; max-width: 560px; margin: 0 auto; }
.contact__inner--single .contact__form { background: #fff; border-radius: 18px; box-shadow: 0 18px 44px rgba(15,49,87,.10); }
@media (max-width: 600px) { .contact__inner--single { margin: 0 auto; padding: 0 16px; } }

/* ===== Page heroes: theme-blue tint over a real photo ===== */
.ab-hero { position: relative; background-size: cover; background-position: center; padding-top: 70px; padding-bottom: 110px; }
.ab-hero > .container { position: relative; z-index: 1; }
.ab-hero--about {
  background-image: linear-gradient(180deg, rgba(15,49,87,.82) 0%, rgba(27,79,128,.70) 55%, rgba(15,49,87,.88) 100%), url(../images/banners/hero-showroom.jpg);
}
.pr-hero {
  background-image: linear-gradient(180deg, rgba(15,49,87,.80) 0%, rgba(27,79,128,.62) 55%, rgba(15,49,87,.88) 100%), url(../images/banners/hero-nightstands-wide.jpg);
  background-position: 70% 60%;
}
.mx-hero {
  background-image: linear-gradient(180deg, rgba(15,49,87,.82) 0%, rgba(27,79,128,.66) 55%, rgba(15,49,87,.90) 100%), url(../images/banners/hero-sample-wall.jpg);
}
.ab-hero .ab-title { text-shadow: 0 2px 24px rgba(0,0,0,.25); }
@media (max-width: 600px) { .ab-hero { padding-top: 50px; padding-bottom: 80px; } }
.pr-hero { background-image: linear-gradient(180deg, rgba(15,49,87,.78) 0%, rgba(27,79,128,.58) 55%, rgba(15,49,87,.86) 100%), url(../images/banners/hero-straw-blue.jpg); background-position: center; }
.mx-hero { background-position: 15% center; background-size: 135% auto; }
@media (max-width: 1100px) { .mx-hero { background-size: cover; background-position: 20% center; } }

/* about page team: deep charcoal with gold, a premium contrast to the cream sections */
.team {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240,184,35,.10) 0%, transparent 55%),
    linear-gradient(180deg, #1F2329 0%, #15181C 100%);
}
.team .ab-heading { color: #fff; }
.team .ab-heading::after { background: var(--gold); }
.team .ab-lead { color: rgba(255,255,255,.7); }
.team .member h4 { color: #fff; }
.team .member span { color: var(--gold); }
.team .member__img { box-shadow: 0 18px 40px rgba(0,0,0,.45); border: 1px solid rgba(240,184,35,.25); background: linear-gradient(160deg, #2A2F37, #1A1D22); }
.team .member__ini { color: var(--gold); }
.team .member:hover .member__img { border-color: var(--gold); }

/* about page team: white-cream */
.team { background: #FBF8F1; border-top: 1px solid #EEE7D6; }
.team .ab-heading { color: var(--blue-darker); }
.team .ab-heading::after { background: var(--gold); }
.team .ab-lead { color: #6B6B6B; }
.team .member h4 { color: var(--blue-darker); }
.team .member span { color: #A07A1A; }
.team .member__img { border: 1px solid #EADFC4; box-shadow: 0 14px 32px rgba(60,45,15,.12); background: radial-gradient(ellipse at 30% 20%, #2A6FA8 0%, var(--blue-deep) 60%, var(--blue-darker) 100%); }
.team .member:hover .member__img { border-color: var(--gold); }

/* page heroes: real dark studio photos, no colour overlay; text sits in the dark side */
.ab-hero, .ab-hero--about, .pr-hero, .mx-hero { background-color: #1E1E1E; background-size: cover; text-align: left; }
.ab-hero--about { background-image: url(../images/banners/hero-shagreen-chest.jpg); background-position: right 60%; }
.pr-hero { background-image: url(../images/banners/hero-nightstands-wide.jpg); background-position: right 65%; }
.mx-hero { background-image: url(../images/banners/hero-straw-blue.jpg); background-position: center; background-size: cover; }
.ab-hero .ab-title, .ab-hero .ab-eyebrow, .ab-hero .ab-hero__intro { text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.ab-hero .ab-hero__intro { margin-left: 0; max-width: 520px; }
.ab-hero .ab-title { max-width: 720px; }
@media (max-width: 900px) {
  .ab-hero { text-align: center; }
  .ab-hero .ab-hero__intro { margin: 22px auto 0; }
  .ab-hero--about, .pr-hero { background-position: 80% center; }
}
.pr-hero { background-size: auto 125%; background-position: right 75%; background-color: #3A3937; }
.mx-hero { background: url(../images/banners/hero-straw-blue.jpg) right center / 56% auto no-repeat, #13283E; }
@media (max-width: 900px) {
  .pr-hero { background-size: cover; background-position: 85% center; }
  .mx-hero { background: url(../images/banners/hero-straw-blue.jpg) center / cover no-repeat, #13283E; }
}
@media (min-width: 901px) {
  .pr-hero {
    background: url(../images/banners/hero-nightstands-wide.jpg) right bottom / auto 100% no-repeat,
                linear-gradient(180deg, #302F2B 0%, #383734 30%, #302F2D 58%, #5F5E5C 82%, #767573 100%);
  }
}
@media (min-width: 901px) { .pr-hero { background: url(../images/banners/hero-products-wide.jpg) right bottom / auto 100% no-repeat, #302F2B; } }

/* ===== Page heroes: Unsplash photos (see assets/CREDITS.txt) ===== */
.ab-hero--about, .pr-hero, .mx-hero { background-repeat: no-repeat; background-size: cover; background-color: #141414; }
.ab-hero--about { background-image: url(../images/banners/hero-about-u.jpg); background-position: center 60%; }
.pr-hero { background-image: url(../images/banners/hero-products-u.jpg); background-position: center 55%; }
.mx-hero { background-image: url(../images/banners/hero-materials-u.jpg); background-position: center; }
.ab-hero { padding-top: 90px; padding-bottom: 130px; }
@media (min-width: 901px) { .pr-hero { background: url(../images/banners/hero-products-u.jpg) center 55% / cover no-repeat, #141414; } }
@media (max-width: 900px) { .mx-hero { background: url(../images/banners/hero-materials-u.jpg) center / cover no-repeat, #141414; } }
.ab-hero--about { background-position: center 22%; }
.mx-hero { background-position: center 40%; }
@media (max-width: 900px) { .mx-hero { background-position: center 40%; } }
.ab-hero--about { background-position: center 40%; }
.ab-hero--about { background-position: center 30%; }

/* ===== Materials (home slider + materials page): warm espresso & gold instead of blue ===== */
.mat-slide { background: linear-gradient(135deg, #2B2420 0%, #1E1A17 100%); }
.mat-slide__img { background: #1E1A17; }
.mat-slide__more { border-color: rgba(240,184,35,.45); }
.mat-dots button.is-active { background: var(--gold); }
.mx__frame { background: linear-gradient(135deg, #2B2420 0%, #1E1A17 100%); }
.mx__num { color: #9A7418; }
.mx__list a:hover, .mx__list a.is-active { color: #2B2420; background: #FBF8F1; }
.mx__cname { color: #2B2420; }
.mt-nav a:hover, .mt-nav a.is-active { background: #2B2420; border-color: #2B2420; }
.mt-head h2 { color: #2B2420; }
/* materials hero: Arvee showroom panels on the right, text on matching charcoal */
.mx-hero { background: url(../images/banners/hero-materials-showroom.jpg) right center / auto 100% no-repeat, #202123; }
@media (max-width: 900px) { .mx-hero { background: url(../images/banners/hero-materials-showroom.jpg) center / cover no-repeat, #202123; } }
@media (max-width: 900px) {
  .mx-hero { background: url(../images/banners/hero-materials-showroom.jpg) center bottom / 100% auto no-repeat, #202123; padding-bottom: calc(68vw + 30px); }
}
/* materials hero: showroom photo full width */
.mx-hero {
  background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,0) 60%),
              url(../images/banners/hero-materials-full.jpg) center / cover no-repeat, #202123;
  padding-top: 110px; padding-bottom: 150px;
}
@media (max-width: 900px) {
  .mx-hero { background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.35)), url(../images/banners/hero-materials-full.jpg) 30% center / cover no-repeat, #202123; padding-bottom: 90px; }
}
/* products hero: straw sideboard photo full width */
.pr-hero, .pr-hero:where(*) {
  background: linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.42) 35%, rgba(0,0,0,0) 62%),
              url(../images/banners/hero-products-full.jpg) center / cover no-repeat, #2A2622 !important;
  padding-top: 110px; padding-bottom: 150px;
}
@media (max-width: 900px) {
  .pr-hero { background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.35)), url(../images/banners/hero-products-full.jpg) 60% center / cover no-repeat, #2A2622 !important; padding-bottom: 90px; }
}
@media (min-width: 901px) {
  .pr-hero { background: linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.15) 62%, rgba(0,0,0,0) 75%),
              url(../images/banners/hero-products-full.jpg) center / cover no-repeat, #2A2622 !important; }
}
/* about hero: material sample wall full width */
.ab-hero--about {
  background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.58) 38%, rgba(0,0,0,.12) 62%, rgba(0,0,0,0) 75%),
              url(../images/banners/hero-about-full.jpg) center / cover no-repeat, #2A2622 !important;
  padding-top: 110px; padding-bottom: 150px;
}
@media (max-width: 900px) {
  .ab-hero--about { background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.38)), url(../images/banners/hero-about-full.jpg) 40% center / cover no-repeat, #2A2622 !important; padding-bottom: 90px; }
}
/* What We Do now sits first under the hero: white, Our Story cream, Director white */
.ab-work { background: #fff; }
/* director block: text left-aligned (photo stays on the right) */
.ab-story--flip .ab-copy { text-align: left; }
.ab-story--flip .ab-heading::after { margin-left: 0; margin-right: auto; }
@media (max-width: 900px) {
  .ab-story--flip .ab-copy { text-align: left; }
  .ab-story--flip .ab-heading::after { margin-left: 0; }
}

/* ===== Contact page ===== */
.ct-hero {
  background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.1) 65%, rgba(0,0,0,0) 78%),
              url(../images/banners/hero-showroom.jpg) center 45% / cover no-repeat, #222 !important;
  padding-top: 110px; padding-bottom: 150px;
}
.ct-page { background: #F6F7F1; padding: 90px 0 110px; }
.ct-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start; max-width: var(--container); }
.ct-info p { font-size: 16px; line-height: 1.8; color: #555; margin-bottom: 30px; }
.ct-info ul { list-style: none; display: grid; gap: 22px; }
.ct-info li { font-size: 16px; color: var(--text); }
.ct-info li span { display: block; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #A07A1A; margin-bottom: 4px; }
.ct-info a:hover { color: var(--gold-dark); }
.ct-page .contact__form { background: #fff; border-radius: 18px; box-shadow: 0 18px 44px rgba(15,49,87,.10); }
@media (max-width: 900px) {
  .ct-hero { background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.4)), url(../images/banners/hero-showroom.jpg) center / cover no-repeat, #222 !important; padding-bottom: 90px; }
  .ct-grid { grid-template-columns: 1fr; gap: 36px; }
}
.ct-hero { background: url(../images/banners/hero-shagreen-chest.jpg) right 60% / cover no-repeat, #1F1F1F !important; }
@media (max-width: 900px) { .ct-hero { background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.2)), url(../images/banners/hero-shagreen-chest.jpg) 80% center / cover no-repeat, #1F1F1F !important; } }
/* contact hero: booth photo (brand sign cropped out), full width */
.ct-hero {
  background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.58) 38%, rgba(0,0,0,.12) 62%, rgba(0,0,0,0) 75%),
              url(../images/banners/hero-contact-full.jpg) center top / cover no-repeat, #2A2622 !important;
}
@media (max-width: 900px) {
  .ct-hero { background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.4)), url(../images/banners/hero-contact-full.jpg) 40% top / cover no-repeat, #2A2622 !important; }
}

/* ===== Materials page: grid view ===== */
.mg__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; }
.mg__card { display: block; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 28px rgba(43,36,32,.08); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.mg__card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(43,36,32,.18); }
.mg__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, #2B2420 0%, #1E1A17 100%); }
.mg__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.mg__card:hover .mg__img img { transform: scale(1.06); }
.mg__num { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,.92); color: #2B2420; font-size: 12px; letter-spacing: 1px; padding: 4px 9px; border-radius: 20px; }
.mg__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; color: #fff; font-size: 20px; font-weight: 200; letter-spacing: 2px; text-transform: uppercase; }
.mg__empty small { margin-top: 10px; font-size: 11px; letter-spacing: 2px; color: var(--gold); }
.mg__body { display: block; padding: 18px 20px 20px; }
.mg__name { display: block; font-size: 18px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: #2B2420; transition: color .25s; }
.mg__card:hover .mg__name { color: var(--gold-dark); }
.mg__types { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: #7A808A; }
.mg__meta { display: block; margin-top: 10px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #A07A1A; }
@media (max-width: 1100px) { .mg__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .mg__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .mg__body { padding: 14px; } .mg__name { font-size: 15px; } .mg__empty { font-size: 15px; } }
.mg__empty small { margin-top: 0; font-size: 12px; }
.mg__empty::before { content: ''; width: 34px; height: 1px; background: var(--gold); margin-bottom: 14px; }
.mg__empty::after { content: ''; width: 34px; height: 1px; background: var(--gold); margin-top: 14px; }
/* phone with country code */
.phone-group { display: flex; gap: 10px; }
.phone-group select { flex: 0 0 auto; width: 150px; }
.phone-group input { flex: 1; min-width: 0; }
@media (max-width: 600px) { .phone-group select { width: 120px; } }
@media (max-width: 600px) { .phone-group select { width: 140px; padding-left: 10px; padding-right: 6px; font-size: 15px; } }

/* ===== Products page spacing ===== */
.products--page { padding: 56px 0 110px; }
.products--page .filters { margin: 0 auto 44px; padding: 0 0 28px; gap: 12px 12px; max-width: 1100px; }
.products--page .grid--masonry { width: 100%; left: auto; transform: none; gap: 28px; }
@media (max-width: 900px) { .products--page { padding-top: 36px; } .products--page .grid--masonry { gap: 18px; } }
@media (max-width: 600px) { .products--page { padding: 24px 0 70px; } .products--page .filters { margin-bottom: 22px; padding-bottom: 16px; } .products--page .grid--masonry { gap: 16px; } }
.products--page .filters { max-width: none; }

/* ===== About page polish ===== */
/* lead lines read as a quote, not as faded body text */
.ab-copy .ab-quote { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.65; font-weight: 300; color: #2B2B2B; margin-bottom: 18px; }
.ab-copy p { color: #4A4A4A; }
/* comfortable reading width */
.ab-copy { max-width: 720px; }
.ab-story .ab-story__inner, .ab-work__inner { align-items: center; }
.ab-work__inner { align-items: start; }
/* mobile: long paragraphs left-aligned, headings consistent */
@media (max-width: 900px) {
  .ab-copy, .ab-work .ab-copy, .ab-story .ab-copy { text-align: left; max-width: none; }
  .ab-work__title, .ab-story .ab-copy .ab-heading { text-align: left; }
  .ab-heading::after, .ab-work .ab-heading::after { margin-left: 0; margin-right: auto; }
  .ab-section { padding: 56px 0; }
  .ab-founder { margin-bottom: 8px; }
  .team .ab-heading, .team .ab-lead { text-align: center; }
  .team .ab-heading::after { margin-left: auto; margin-right: auto; }
}
.ab-copy p:not(.ab-quote) { font-size: 16.5px; line-height: 1.85; }

/* ===== Footer contact details ===== */
.footer__inner { grid-template-columns: 1.4fr 1fr 1.3fr; }
.footer .footer__contact .fc__item { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; line-height: 1.55; color: #CFCFCF; }
.footer__contact .fc__item svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; fill: var(--gold); }
.footer__contact a.fc__item:hover { color: var(--gold); }
.footer__contact .btn { margin-top: 8px; }
@media (max-width: 900px) { .footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer__inner { grid-template-columns: 1fr; } }

/* ===== Home intro: design ethos + story, between hero and products ===== */
/* Full-width photo; cream wash on the left keeps the copy readable */
.intro { position: relative; overflow: hidden; background: #EFE8DD; min-height: 720px; padding: 100px 0; display: flex; align-items: center; }
.intro__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.intro::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246, 241, 233, .94) 0%, rgba(246, 241, 233, .82) 34%, rgba(246, 241, 233, 0) 56%); }
.intro .container { position: relative; }
.intro__text { max-width: 500px; color: #2B2724; }
.intro__script { display: flex; align-items: center; gap: 14px; color: #8F6A0F; font-size: 13px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 20px; }
.intro__script::before { content: ""; width: 40px; height: 2px; background: #8F6A0F; }
.intro__title { font-size: 44px; font-weight: 300; line-height: 1.15; letter-spacing: -.5px; color: #2B2724; margin-bottom: 22px; }
.intro__lead { color: #2F2A26; font-size: 16px; font-weight: 400; line-height: 1.75; }
.intro__title strong { font-weight: 500; }
.intro__pillars { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin: 30px 0; padding: 22px 0; border-top: 1px solid rgba(43, 39, 36, .15); border-bottom: 1px solid rgba(43, 39, 36, .15); }
.intro__pillars li { display: flex; flex-direction: column; align-items: flex-start; padding: 2px 18px; }
.intro__pillars li:first-child { padding-left: 0; }
.intro__pillars li + li { border-left: 1px solid rgba(43, 39, 36, .25); }
.intro__pillars svg { width: 30px; height: 30px; fill: none; stroke: var(--gold-dark); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; }
.intro__pillars strong { font-size: 17px; font-weight: 500; }
.intro__pillars span { font-size: 14px; color: #5E5249; }
.intro__tags { margin-top: 28px; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; color: #2B2724; }
.intro__tags span + span::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-dark); vertical-align: middle; margin: 0 14px 2px; }
@media (min-width: 901px) and (max-width: 1280px) {
  /* laptops and zoomed-in browsers: copy on the left on plain cream, photo on the right */
  .intro { background: #F6F1E9; min-height: 640px; padding: 80px 0; }
  .intro__bg { left: 44%; width: 56%; object-position: 58% center; }
  .intro::before { background: linear-gradient(90deg, #F6F1E9 0%, #F6F1E9 44%, rgba(246, 241, 233, .85) 47%, rgba(246, 241, 233, 0) 56%); }
  .intro__text { max-width: calc(44vw - 40px); }
  .intro__title { font-size: clamp(30px, 3.1vw, 40px); }
  .intro__pillars li { padding: 2px 10px; }
  .intro__pillars strong { font-size: 15px; }
  .intro__pillars span { font-size: 12.5px; }
  .intro__tags { white-space: normal; line-height: 2; }
  .intro__tags span + span::before { margin: 0 10px 2px; }
}
@media (max-width: 900px) {
  /* Copy first on cream, then the photo full width underneath */
  .intro { display: flex; flex-direction: column; min-height: 0; padding: 60px 0 0; background: #F6F1E9; }
  .intro::before { display: none; }
  .intro .container { order: -1; padding-bottom: 40px; }
  .intro__bg { position: static; height: auto; aspect-ratio: 16 / 9; object-position: 72% center; }
  .intro__text { max-width: 640px; }
  .intro__title { font-size: 34px; }
  .intro__pillars { margin: 30px 0; }
}
@media (max-width: 600px) {
  .intro__bg { aspect-ratio: 4 / 3; }
}
@media (max-width: 480px) {
  .intro__title { font-size: 28px; }
  .intro__pillars li { padding: 2px 10px; }
  .intro__pillars strong { font-size: 14px; }
  .intro__pillars span { font-size: 12px; }
  .intro__tags { font-size: 11px; letter-spacing: 1.2px; white-space: normal; }
  .intro__tags span + span::before { margin: 0 8px 2px; }
}

/* ===== Company Profile page ===== */
.ab-hero--profile {
  background: linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.60) 40%, rgba(0,0,0,.18) 65%, rgba(0,0,0,.05) 80%),
              url(../images/banners/intro-global-design.jpg) right center / cover no-repeat, #2A2622 !important;
  padding-top: 110px; padding-bottom: 150px;
}
.cp-facts { background: #F3EDE3; color: #2B2724; border-top: 1px solid #E4DCCF; border-bottom: 1px solid #E4DCCF; }
.cp-facts__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.cp-fact { padding: 44px 24px; text-align: center; }
.cp-fact + .cp-fact { border-left: 1px solid #DCD2C3; }
.cp-fact strong { display: block; color: #8F6A0F; font-size: clamp(30px, 3vw, 42px); font-weight: 300; letter-spacing: 1px; margin-bottom: 6px; }
.cp-fact span { font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: #5E5249; }
.ab-copy .cp-clients__label { margin: 30px 0 14px; color: var(--gold-dark); font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
.cp-clients { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.cp-clients li { background: #fff; border: 1px solid #E4E0D6; border-radius: 999px; padding: 8px 18px; font-size: 15px; font-weight: 500; color: #2B2B2B; }
.ab-copy .cp-note { margin-top: 22px; font-size: 15px; color: #6A6A6A; }
.cp-services { background: #fff; }
.cp-services .ab-lead { margin-bottom: 50px; }
.cp-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cp-service { background: #F6F7F1; border-radius: 16px; padding: 38px 32px; transition: transform .35s, box-shadow .35s; }
.cp-service:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.08); }
.cp-service svg { width: 40px; height: 40px; fill: none; stroke: var(--gold-dark); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 20px; }
.cp-service h3 { font-size: 20px; font-weight: 500; margin-bottom: 10px; color: var(--text); }
.cp-service p { font-size: 15.5px; line-height: 1.7; color: #555; }
.cp-services__foot { text-align: center; margin-top: 40px; font-size: 17px; color: #4A4A4A; }
.cp-why { background: #2E2925 !important; color: #fff; }
.cp-why .ab-heading { margin-bottom: 0; }
.cp-why .ab-heading::after { margin-left: auto; margin-right: auto; }
.cp-why__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; margin-top: 56px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.15); }
.cp-why__item { grid-column: span 2; background: #2E2925; padding: 36px 30px 40px; transition: background .35s; }
.cp-why__item:nth-child(4), .cp-why__item:nth-child(5) { grid-column: span 3; }
.cp-why__item:hover { background: #3A332D; }
.cp-why .ab-why__num { color: var(--gold); }
.cp-why__item h3 { font-size: 19px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; }
.cp-why__item p { font-size: 15px; line-height: 1.7; opacity: .85; }
.cp-facts + .cta { background-image: linear-gradient(rgba(30,30,30,.74), rgba(30,30,30,.74)), url(../images/banners/hero-sample-wall.jpg); }
@media (max-width: 900px) {
  .ab-hero--profile { background: linear-gradient(180deg, rgba(0,0,0,.66), rgba(0,0,0,.45)), url(../images/banners/intro-global-design.jpg) 75% center / cover no-repeat, #2A2622 !important; padding-bottom: 90px; }
  .cp-facts__grid { grid-template-columns: 1fr 1fr; }
  .cp-fact { padding: 30px 16px; }
  .cp-fact:nth-child(3) { border-left: 0; }
  .cp-fact:nth-child(n+3) { border-top: 1px solid #DCD2C3; }
  .cp-services__grid { grid-template-columns: 1fr; }
  .cp-why__grid { grid-template-columns: 1fr; }
  .cp-why__item, .cp-why__item:nth-child(4), .cp-why__item:nth-child(5) { grid-column: auto; }
}
.cp-facts + .cta .btn--outline:hover { color: #2B2724; }

/* ===== Typography: every content paragraph uses the same size, weight and font ===== */
.slide__text p, .about__text, .cta p, .contact__info p, .materials__head p, .mat-card__desc,
.mat-more p, .mat-hero p, .mx__intro, .page-hero p, .ab-lead, .ab-copy p, .ab-quote, .ab-copy .ab-quote,
.ab-copy p:not(.ab-quote), .ab-hero__intro, .ab-why__item p, .mat-slide__desc, .cs-head p,
.contact__head p, .ct-info p, .intro__lead, .ab-copy .cp-note, .cp-service p, .cp-services__foot,
.cp-why__item p, .footer__inner p {
  font-family: 'Jost', sans-serif; font-size: var(--fs-content); font-weight: 400; line-height: var(--lh-content); letter-spacing: normal;
}
@media (max-width: 900px) { :root { --fs-content: 16px; } }

/* ===== Material detail hero: warm dark wash over each material's own photo (no blue) ===== */
/* each page sets its own photo inline: style="background-image: url(...)" */
.mat-hero { position: relative; background: #2B2420 center 40% / cover no-repeat; padding: 90px 0 84px; }
.mat-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,26,23,.88) 0%, rgba(30,26,23,.72) 45%, rgba(30,26,23,.35) 100%); }
.mat-hero > .container { position: relative; }
.mat-hero h1 { font-weight: 300; letter-spacing: 1px; }
.mat-hero h1::after { content: ""; display: block; width: 46px; height: 2px; background: var(--gold); margin-top: 18px; }
.mat-hero__back { display: inline-block; margin-bottom: 22px; color: var(--gold); font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
.mat-hero__back:hover { color: #fff; }
@media (max-width: 900px) { .mat-hero { padding: 60px 0 56px; } }
.mat-note { max-width: 760px; margin: 0 0 36px; padding: 14px 18px; border-left: 2px solid var(--gold); background: #F6F1E9; color: #5E5249; font-size: 15px; line-height: 1.6; }

/* About: sub-headings and list inside Our Story; Our Craft section under the team */
.ab-copy .ab-sub-title { margin: 34px 0 12px; color: var(--gold-dark); font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
.ab-list { list-style: none; margin: 0 0 18px; }
.ab-list li { position: relative; padding-left: 22px; margin-bottom: 12px; font-size: var(--fs-content); line-height: var(--lh-content); color: #4A4A4A; }
.ab-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.ab-list b { color: #2B2B2B; font-weight: 600; }
.ab-craft { background: #F6F7F1; }

/* ===== Mobile fixes ===== */
/* single-column grids must be allowed to shrink below their content's natural width */
@media (max-width: 900px) {
  .ct-grid { grid-template-columns: minmax(0, 1fr); }
  .ct-grid > * { min-width: 0; }
}
@media (max-width: 600px) {
  .contact__form { grid-template-columns: minmax(0, 1fr); }
  .contact__form .field, .contact__form input, .contact__form select, .contact__form textarea { min-width: 0; max-width: 100%; }
}
@media (max-width: 900px) {
  .nav .nav__cta-mobile { padding: 12px 34px; margin-top: 6px; color: #fff; }
  .nav .nav__cta-mobile::after { display: none; }
}
/* Our Team on phones: one member per row, photo at a comfortable size */
@media (max-width: 600px) {
  .team .team__grid { gap: 36px; }
  .team .team__grid .member { flex: 0 0 100%; max-width: 300px; }
}

/* ===== Mobile: all headings centred, footer centred with a spaced "Get in touch" button ===== */
@media (max-width: 600px) {
  h1, h2, h3, h4, h5,
  .ab-heading, .ab-work__title, .section-title, .intro__title, .ab-sub-title, .ab-copy .ab-sub-title,
  .mat-hero h1, .cta h2, .contact__head, .materials__head { text-align: center !important; }
  .ab-heading::after, .ab-work .ab-heading::after, .ab-story--flip .ab-heading::after,
  .mat-hero h1::after, .section-title::after { margin-left: auto !important; margin-right: auto !important; }
  .intro__script { justify-content: center; text-align: center; }
  .mat-hero__back { display: block; text-align: center; }
  .mat-hero p { margin-left: auto; margin-right: auto; text-align: center; }

  .footer__inner { text-align: center; }
  .footer__logo { margin-left: auto; margin-right: auto; }
  .footer .footer__contact .fc__item { justify-content: center; text-align: left; }
  .footer .footer__contact .btn { display: flex; width: max-content; margin: 28px auto 34px; }
}
@media (max-width: 600px) { .intro__script::before { display: none; } }

/* Contact form: error message under each field */
.field__error { display: block; min-height: 0; margin-top: 6px; color: #D64545; font-size: 13px; line-height: 1.4; }
.field__error:empty { display: none; }
.field.invalid .phone-group input, .field.invalid select { border-color: #D64545; }