/* Fuller & Company — independent concept
   Tokens: lime plaster ground, honed marble, walnut, deep painted blue, white oak, brass.
   Type: Libre Caslon (cabinetmakers' pattern-book face) + Schibsted Grotesk. */

:root {
  --plaster: #E8E3D9;
  --paper: #EFEBE4;
  --marble: #D9D3C7;
  --walnut: #33251D;
  --ink: #2B211B;
  --ink-soft: #5B4D42;
  --paint: #22384C;
  --paint-deep: #1B2D3E;
  --oak: #B88A5A;
  --brass: #7A5C2A;
  --on-dark: #F1ECE4;
  --on-dark-soft: #CFC6B9;

  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --reveal: clamp(8px, 1.05vw, 16px);
  --bar-h: 64px;
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --slide-ms: 9000ms;
  --fade-ms: 2400ms;
  --focus: var(--paint);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--plaster);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  background: var(--plaster); color: var(--ink); padding: .75rem 1rem; border-radius: 2px;
}
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.amp { font-family: var(--serif); font-style: italic; font-weight: 400; }

section[id], article[id] { scroll-margin-top: calc(var(--bar-h) + 1rem); }
main:focus { outline: none; }

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7rem 1.35rem;
  border: 1px solid transparent; border-radius: 2px;
  font-family: var(--sans); font-size: .98rem; font-weight: 500; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn--plaster { background: var(--plaster); color: var(--walnut); }
.btn--plaster:hover { background: #fff; }
.btn--paint { background: var(--paint); color: var(--on-dark); }
.btn--paint:hover { background: var(--paint-deep); }

/* Header bar --------------------------------------------------------------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: #fff;
  transition: background-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.bar__inner {
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem);
  min-height: var(--bar-h);
  padding: calc(var(--reveal) + 6px) calc(var(--reveal) + var(--gutter)) 6px;
  transition: padding .4s ease;
}
.bar__mark {
  font-family: var(--display); font-size: 1.45rem; line-height: 1; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
/* Over the photograph the small mark is invisible, so it must not take up room either. */
.bar:not(.is-solid) .bar__mark { position: absolute; pointer-events: none; }
.bar__nav { margin-left: auto; }
.bar__nav ul { display: flex; gap: clamp(1.1rem, 2vw, 2rem); }
.bar__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .95rem; text-decoration: none; letter-spacing: .005em;
  text-shadow: 0 1px 10px rgba(20, 14, 10, .35);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 0 1px no-repeat;
  transition: background-size .3s var(--ease);
}
.bar__nav a:hover { background-size: 100% 1px; }
.bar__call {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 2px;
  font-size: .95rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.bar__call:hover { background: rgba(255, 255, 255, .14); }
.bar__call-short { display: none; }
.bar__menu {
  display: none; align-items: center; gap: .6rem; min-height: 44px; min-width: 44px; padding: 0 .25rem 0 .5rem;
  background: none; border: 0; font-size: .95rem; font-weight: 500;
}
.bar__menu-lines { display: inline-grid; gap: 6px; width: 22px; }
.bar__menu-lines i { display: block; height: 1.5px; background: currentColor; }
.bar__menu-lines i:last-child { width: 15px; justify-self: end; }

.bar.is-solid { background: var(--plaster); color: var(--ink); box-shadow: 0 1px 0 rgba(51, 37, 29, .14); }
.bar.is-solid .bar__inner { padding-top: 6px; padding-inline: var(--gutter); }
.bar.is-solid .bar__mark { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.bar.is-solid .bar__nav a { text-shadow: none; }
.bar.is-solid .bar__call { background: var(--paint); border-color: var(--paint); color: var(--on-dark); }
.bar.is-solid .bar__call:hover { background: var(--paint-deep); }
.bar:not(.is-solid) :focus-visible { outline-color: #fff; box-shadow: 0 0 0 4px rgba(20, 14, 10, .35); }

@media (max-width: 1099px) {
  .bar__nav { display: none; }
  .bar__call { margin-left: auto; }
  .bar__menu { display: inline-flex; }
}
@media (max-width: 520px) {
  .bar__call-long { display: none; }
  .bar__call-short { display: inline; }
  .bar__call { padding: 0 .8rem; }
  .bar__mark { font-size: 1.2rem; }
  .bar__inner { gap: .6rem; }
}
@media (max-width: 359px) {
  .bar.is-solid .bar__mark { font-size: 1.05rem; }
}

/* Menu sheet --------------------------------------------------------------- */
.menu { position: fixed; inset: 0; z-index: 80; }
/* While the sheet slides away it must not catch taps meant for the Menu button beneath. */
.menu:not(.is-open) { pointer-events: none; }
.menu__backdrop { position: absolute; inset: 0; background: rgba(33, 24, 18, .5); opacity: 0; transition: opacity .35s ease; }
.menu__sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(27rem, 100%); height: 100%;
  display: flex; flex-direction: column; gap: 2rem;
  padding: 6px var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  background: var(--plaster); color: var(--ink);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .45s var(--ease);
  box-shadow: -1px 0 0 rgba(51, 37, 29, .12);
}
.menu.is-open .menu__backdrop { opacity: 1; }
.menu.is-open .menu__sheet { transform: none; }
.menu__head { display: flex; align-items: center; justify-content: space-between; min-height: calc(var(--bar-h) - 6px); gap: 1rem; }
.menu__mark { font-family: var(--display); font-size: 1.35rem; line-height: 1; }
.menu__close {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; min-width: 44px; padding: 0 .25rem 0 .5rem;
  background: none; border: 0; font-size: .95rem; font-weight: 500;
}
.menu__x { position: relative; width: 18px; height: 18px; }
.menu__x::before, .menu__x::after { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 1.5px; background: currentColor; }
.menu__x::before { transform: rotate(45deg); }
.menu__x::after { transform: rotate(-45deg); }
.menu__links { border-top: 1px solid rgba(51, 37, 29, .16); }
.menu__links a {
  display: flex; align-items: center; min-height: 56px; padding: .4rem 0;
  border-bottom: 1px solid rgba(51, 37, 29, .16);
  font-family: var(--display); font-size: clamp(1.55rem, 6vw, 1.9rem); line-height: 1.15; text-decoration: none;
}
.menu__links a:hover { color: var(--paint); }
.menu__contact { display: grid; gap: 1rem; justify-items: start; margin-top: auto; }
.menu__email { font-size: 1rem; min-height: 44px; display: inline-flex; align-items: center; }

/* Hero: the photograph is set like an inset door in its face frame --------- */
.hero { padding: var(--reveal); background: var(--plaster); }
.hero__door {
  position: relative; isolation: isolate;
  min-height: calc(100svh - 2 * var(--reveal));
  overflow: hidden;
  background: var(--walnut);
  box-shadow: 0 0 0 1px rgba(51, 37, 29, .32);
  color: #fff;
}
.hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0; z-index: 0;
  transition: opacity 0s linear;
}
/* The incoming photograph fades in over the outgoing one, which stays fully opaque until
   the fade is complete, so the walnut ground never shows through mid-transition. */
.hero__slide.is-leaving { opacity: 1; z-index: 1; }
.hero__slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
  transform-origin: var(--origin, 50% 60%);
}
.hero__slide.is-active { opacity: 1; z-index: 2; transition: opacity var(--fade-ms) ease; }
.hero__slide.is-drift img { animation: drift 12.5s linear forwards; }
.hero.is-held .hero__slide img, .hero.is-stopped .hero__slide img { animation-play-state: paused; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.045); } }
.hero__slide:nth-child(1) { --pos: 50% 55%; --origin: 45% 60%; }
.hero__slide:nth-child(2) { --pos: 48% 50%; --origin: 55% 55%; }
.hero__slide:nth-child(3) { --pos: 55% 50%; --origin: 55% 60%; }
.hero__slide.is-broken { display: none; }
@media (max-aspect-ratio: 4/5) {
  .hero__slide:nth-child(1) { --pos: 24% 50%; --origin: 30% 60%; }
  .hero__slide:nth-child(2) { --pos: 44% 50%; }
  .hero__slide:nth-child(3) { --pos: 52% 50%; }
}

.hero__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(24, 17, 12, .62) 0%, rgba(24, 17, 12, .3) 22%, rgba(24, 17, 12, 0) 44%),
    linear-gradient(to top, rgba(24, 17, 12, .72) 0%, rgba(24, 17, 12, .34) 26%, rgba(24, 17, 12, 0) 52%);
}

/* Extra shade that fades in with bright photographs only (data-tone="light" on the hero). */
.hero__shade::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  transition: opacity var(--fade-ms) ease;
  background:
    linear-gradient(to bottom, rgba(24, 17, 12, .5) 0%, rgba(24, 17, 12, .26) 26%, rgba(24, 17, 12, 0) 50%),
    linear-gradient(to top right, rgba(24, 17, 12, .55) 0%, rgba(24, 17, 12, .22) 38%, rgba(24, 17, 12, 0) 62%);
}
.hero[data-tone="light"] .hero__shade::after { opacity: 1; }
.hero__brand, .hero__line { transition: text-shadow var(--fade-ms) ease; }
.hero[data-tone="light"] .hero__brand { text-shadow: 0 2px 34px rgba(20, 14, 10, .5), 0 1px 3px rgba(20, 14, 10, .25); }
.hero[data-tone="light"] .hero__line { text-shadow: 0 1px 20px rgba(20, 14, 10, .55); }

.hero__content {
  display: flex; flex-direction: column;
  min-height: calc(100svh - 2 * var(--reveal));
  padding: calc(var(--bar-h) + clamp(.25rem, 1.6vw, 1.5rem)) var(--gutter) clamp(1.25rem, 3vw, 2.5rem);
}
.hero__brand {
  font-family: var(--display);
  font-size: clamp(3.25rem, 9.4vw, 9.6rem);
  line-height: .92; letter-spacing: -.014em;
  text-shadow: 0 2px 30px rgba(20, 14, 10, .25);
  max-width: 100%;
}
.hero__brand-a, .hero__brand-b { white-space: nowrap; }
.hero__brand .amp { font-size: .9em; padding-inline: .02em; }

.hero__foot {
  margin-top: auto; padding-top: 2rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
}
.hero__lede { max-width: 38rem; }
.hero__line {
  font-family: var(--display); font-size: clamp(1.55rem, 2.6vw, 2.5rem); line-height: 1.1;
  max-width: 17em; text-wrap: balance;
  text-shadow: 0 1px 18px rgba(20, 14, 10, .3);
}
.hero__sub { margin-top: .85rem; max-width: 33em; font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.5rem; }
.hero__link {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; font-size: .98rem;
  text-decoration: underline; text-underline-offset: .35em; text-decoration-color: rgba(255, 255, 255, .6);
}
.hero__link:hover { text-decoration-color: #fff; }
.hero :focus-visible { outline-color: #fff; box-shadow: 0 0 0 4px rgba(20, 14, 10, .35); }

.hero__controls { display: grid; justify-items: end; gap: .25rem; flex-shrink: 0; }
.hero__caption { font-size: .85rem; color: rgba(255, 255, 255, .86); text-align: right; min-height: 1.4em; transition: opacity .6s ease; }
.hero__caption.is-changing { opacity: 0; }
.hero__buttons { display: flex; align-items: center; gap: .25rem; }
.hero__dots { display: flex; }
.hero__dot {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: none; border: 0;
}
.hero__dot span {
  position: relative; display: block; width: 30px; height: 2px; overflow: hidden;
  background: rgba(255, 255, 255, .38);
}
.hero__dot span::after {
  content: ""; position: absolute; inset: 0; background: #fff;
  transform: scaleX(0); transform-origin: left;
}
.hero__dot[aria-current="true"] span::after { transform: scaleX(1); }
.hero.is-playing .hero__dot[aria-current="true"] span::after { animation: dot-fill var(--slide-ms) linear forwards; }
.hero.is-held .hero__dot[aria-current="true"] span::after { animation-play-state: paused; }
@keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__pause {
  display: grid; place-items: center; width: 44px; height: 44px; margin-left: .25rem;
  background: none; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%;
}
.hero__pause:hover { background: rgba(255, 255, 255, .12); }
.hero__pause-icon { position: relative; width: 10px; height: 12px; }
.hero__pause-icon::before, .hero__pause-icon::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: #fff;
}
.hero__pause-icon::before { left: 0; }
.hero__pause-icon::after { right: 0; }
.hero.is-stopped .hero__pause-icon::before {
  left: 1px; width: 0; height: 0; background: none;
  border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff;
}
.hero.is-stopped .hero__pause-icon::after { display: none; }

@media (max-width: 760px) {
  .hero__foot { flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .hero__controls { justify-items: start; grid-template-columns: 1fr auto; align-items: center; }
  .hero__caption { text-align: left; grid-row: 1; grid-column: 1; }
  .hero__buttons { grid-row: 1; grid-column: 2; margin-right: -10px; }
}
@media (max-width: 420px) {
  .hero__controls { grid-template-columns: 1fr; gap: .1rem; }
  .hero__buttons { grid-row: 2; grid-column: 1; margin-left: -7px; margin-right: 0; }
}
@media (max-width: 599px) {
  .hero__brand { font-size: clamp(3.3rem, 17.5vw, 5.6rem); line-height: .9; }
  .hero__brand-a, .hero__brand-b { display: block; }
  .hero__brand-b { padding-left: .02em; }
  .hero__line { font-size: clamp(1.4rem, 6.4vw, 1.8rem); }
  .hero__sub { font-size: .95rem; }
  .hero__shade {
    background:
      linear-gradient(to bottom, rgba(24, 17, 12, .62) 0%, rgba(24, 17, 12, .28) 30%, rgba(24, 17, 12, .06) 46%),
      linear-gradient(to top, rgba(24, 17, 12, .8) 0%, rgba(24, 17, 12, .45) 34%, rgba(24, 17, 12, 0) 60%);
  }
  .hero__actions .btn { flex: 1 1 auto; }
}
@media (max-width: 359px) {
  .hero__sub { display: none; }
  .hero__caption { font-size: .8rem; }
}
/* Tall tablet portrait: stack the nameplate so it holds its own against the photograph */
@media (min-width: 600px) and (max-width: 1023px) and (max-aspect-ratio: 4/5) {
  .hero__brand { font-size: clamp(5rem, 14.5vw, 8.5rem); line-height: .9; }
  .hero__brand-a, .hero__brand-b { display: block; }
}
/* Short landscape screens: keep everything inside one viewport */
@media (max-height: 560px) and (min-width: 600px) {
  .hero__brand { font-size: min(9.4vw, 17svh); }
  .hero__content { padding-top: calc(var(--bar-h) - 4px); padding-bottom: 1rem; }
  .hero__foot { padding-top: .75rem; }
  .hero__line { font-size: clamp(1.25rem, 5.4svh, 1.8rem); }
  .hero__sub { display: none; }
  .hero__actions { margin-top: .85rem; }
  .hero__caption { display: none; }
}

/* Approach ----------------------------------------------------------------- */
.approach { padding-block: var(--section) calc(var(--section) * .8); }
.approach__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 1.75rem); }
.approach__title {
  grid-column: 1 / 9; grid-row: 1;
  font-family: var(--display); font-size: clamp(2.3rem, 4.7vw, 4.5rem); line-height: 1.03; letter-spacing: -.012em;
  max-width: 12.5em; text-wrap: balance;
}
.approach__text { grid-column: 2 / 8; grid-row: 2; margin-top: clamp(2rem, 4vw, 3.5rem); max-width: 36rem; }
.approach__text p + p { margin-top: 1.1rem; }
.approach__text p:first-child { font-size: 1.2rem; line-height: 1.55; }
.approach__figure { grid-column: 10 / 13; grid-row: 1 / 3; align-self: start; margin-top: .6rem; }
.approach__figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* Services ----------------------------------------------------------------- */
.work { padding-bottom: calc(var(--section) * .6); }
.work__title {
  font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08;
  padding-top: 1.25rem; border-top: 1px solid rgba(51, 37, 29, .2);
}
.service { padding-block: clamp(2.75rem, 6vw, 5.5rem); }
.service + .service { padding-top: clamp(1.5rem, 4vw, 3.5rem); }
.service__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 1.75rem); row-gap: clamp(1.5rem, 3vw, 2.5rem); }
.service__text h3 { font-family: var(--display); font-size: clamp(1.75rem, 2.7vw, 2.45rem); line-height: 1.08; max-width: 14em; text-wrap: balance; }
.service__text p { margin-top: 1rem; max-width: 34rem; }
.service__main img, .service__detail img { width: 100%; object-fit: cover; }
.service__list { margin-top: 1.4rem; max-width: 22rem; border-top: 1px solid rgba(51, 37, 29, .2); }
.service__list li { padding: .55rem 0; border-bottom: 1px solid rgba(51, 37, 29, .2); font-size: .98rem; }

@media (min-width: 1024px) {
  .service--cabinetry .service__main { grid-column: 1 / 9; grid-row: 1 / 3; }
  .service--cabinetry .service__main img { aspect-ratio: 16 / 9; max-height: 78vh; }
  .service--cabinetry .service__text { grid-column: 9 / 13; grid-row: 1; padding-left: clamp(.5rem, 2vw, 2rem); padding-top: .25rem; }
  .service--cabinetry .service__detail { grid-column: 10 / 13; grid-row: 2; align-self: end; justify-self: end; width: min(100%, 240px); margin-bottom: -5rem; }
  .service--cabinetry .service__detail img { aspect-ratio: 3 / 4; }

  .service--kitchens { padding-top: clamp(6rem, 10vw, 9rem); }
  .service--kitchens .service__text { grid-column: 1 / 5; grid-row: 1; padding-top: .25rem; }
  .service--kitchens .service__main { grid-column: 6 / 13; grid-row: 1 / 3; }
  .service--kitchens .service__main img { aspect-ratio: 4 / 3; max-height: 80vh; }
  .service--kitchens .service__detail { grid-column: 2 / 5; grid-row: 2; align-self: end; }
  .service--kitchens .service__detail img { aspect-ratio: 4 / 3; }

  .service--bathrooms .service__detail { grid-column: 1 / 5; grid-row: 1 / 3; align-self: start; margin-top: clamp(3rem, 6vw, 6rem); }
  .service--bathrooms .service__detail img { aspect-ratio: 3 / 4; max-height: 80vh; }
  .service--bathrooms .service__main { grid-column: 6 / 13; grid-row: 1; }
  .service--bathrooms .service__main img { aspect-ratio: 3 / 2; max-height: 72vh; }
  .service--bathrooms .service__text { grid-column: 6 / 11; grid-row: 2; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .service__main { grid-column: 1 / -1; }
  .service__main img { aspect-ratio: 3 / 2; max-height: 70vh; }
  .service__text { grid-column: 1 / 8; }
  .service__detail { grid-column: 8 / 13; align-self: start; }
  .service__detail img { aspect-ratio: 3 / 4; max-height: 56vh; }
  .service--kitchens .service__detail img { aspect-ratio: 4 / 3; }
  .service--kitchens .service__text { grid-row: 1; }
  .service--bathrooms .service__text { grid-row: 2; }
  .service--bathrooms .service__detail { grid-row: 2; }
}
@media (max-width: 719px) {
  .service__grid > * { grid-column: 1 / -1; }
  .service__text { order: -1; }
  .service__main img { aspect-ratio: 4 / 3; max-height: 66vh; }
  .service__detail { width: 68%; }
  .service__detail img { aspect-ratio: 3 / 4; max-height: 60vh; }
  .service--kitchens .service__detail, .service--bathrooms .service__detail { justify-self: end; }
  .service--kitchens .service__detail img { aspect-ratio: 4 / 3; }
}

/* Commercial (walnut field) ------------------------------------------------ */
.commercial { background: var(--walnut); color: var(--on-dark); --focus: var(--on-dark); }
.commercial__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 1.75rem);
  align-items: center;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.commercial__text {
  grid-column: 1 / 6;
  padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
  padding-right: 1rem;
}
.commercial__text h2 { font-family: var(--display); font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.05; }
.commercial__text p { margin-top: 1rem; max-width: 30rem; color: var(--on-dark-soft); }
.commercial__text p:first-of-type { color: var(--on-dark); }
.commercial__text .btn { margin-top: 1.75rem; }
.commercial__figure { grid-column: 7 / 13; }
.commercial__figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; max-height: 76vh; }
@media (max-width: 899px) {
  .commercial__text { grid-column: 1 / -1; padding-right: var(--gutter); }
  .commercial__figure { grid-column: 1 / -1; margin-top: 2.5rem; padding-left: var(--gutter); }
}

/* Finishes (honed marble) -------------------------------------------------- */
.finishes { background: var(--marble); padding-block: var(--section); }
.finishes__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 1.75rem); row-gap: 2.5rem; align-items: start; }
.finishes__figure { grid-column: 1 / 7; }
.finishes__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.finishes__text { grid-column: 8 / 13; }
.finishes__text h2 { font-family: var(--display); font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.08; }
.finishes__text > p { margin-top: 1rem; max-width: 30rem; }
.finishes__list { margin: 2rem 0 0; border-top: 1px solid rgba(51, 37, 29, .22); }
.finishes__list div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid rgba(51, 37, 29, .22); }
.finishes__list dt { font-family: var(--display); font-size: 1.3rem; line-height: 1.25; }
.finishes__list dd { margin: 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.5; padding-top: .1rem; }
@media (max-width: 899px) {
  .finishes__figure, .finishes__text { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .finishes__list div { grid-template-columns: 1fr; gap: .15rem; }
}

/* Process ------------------------------------------------------------------ */
.process { padding-block: var(--section); }
.process h2 { font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08; max-width: 14em; }
.process__steps {
  counter-reset: step;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.25rem);
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
}
.process__steps li { counter-increment: step; padding-top: 1rem; border-top: 1px solid rgba(51, 37, 29, .22); }
.process__steps li::before {
  content: counter(step); display: block; margin-bottom: 1.1rem;
  font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--brass);
}
.process__steps h3 { font-family: var(--display); font-size: 1.5rem; line-height: 1.15; }
.process__steps p { margin-top: .6rem; color: var(--ink-soft); font-size: 1rem; max-width: 22rem; }
@media (max-width: 899px) { .process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; } }
@media (max-width: 479px) { .process__steps { grid-template-columns: 1fr; } }

/* Styles we build (gallery) ------------------------------------------------ */
.styles { padding-block: 0 var(--section); }
.styles__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 1.75rem);
  padding-top: 1.25rem; border-top: 1px solid rgba(51, 37, 29, .2); align-items: end;
}
.styles__head h2 { grid-column: 1 / 6; font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08; }
.styles__head p { grid-column: 7 / 12; color: var(--ink-soft); max-width: 32rem; }
@media (max-width: 899px) {
  .styles__head h2, .styles__head p { grid-column: 1 / -1; }
  .styles__head p { margin-top: .9rem; }
}
.filters { display: flex; flex-wrap: wrap; gap: 0 clamp(1.1rem, 2.4vw, 1.75rem); margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.filter {
  min-height: 44px; padding: 0; background: none; border: 0;
  color: var(--ink-soft); font-size: 1rem;
  background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat;
  background-size: 0 1.5px; background-position: 0 calc(100% - 8px);
  transition: background-size .3s var(--ease), color .2s ease;
}
.filter:hover { color: var(--ink); }
.filter[aria-pressed="true"] { color: var(--ink); background-size: 100% 1.5px; }

.mosaic {
  --gap: clamp(.75rem, 1.6vw, 1.4rem);
  display: flex; flex-wrap: wrap; align-items: flex-start;
  column-gap: var(--gap); row-gap: clamp(1.5rem, 2.6vw, 2.4rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
/* Justified rows: script sets --w so each photograph keeps its own proportions (no cropping). */
.tile { flex: 0 0 auto; width: var(--w, 100%); min-width: 0; }
.tile__open {
  display: block; width: 100%; aspect-ratio: var(--ar, 4 / 3); padding: 0; margin: 0;
  border: 0; background: var(--marble); overflow: hidden; cursor: zoom-in;
}
.tile__open img { width: 100%; height: 100%; object-fit: cover; }
.tile__cap { margin-top: .6rem; font-size: .92rem; line-height: 1.4; color: var(--ink-soft); }
@media (max-width: 719px) {
  .mosaic { row-gap: 1.25rem; }
  .tile__cap { font-size: .86rem; }
}

/* Voices ------------------------------------------------------------------- */
.voices { padding-block: calc(var(--section) * .7) var(--section); }
.voices__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 1.75rem);
  row-gap: clamp(2.5rem, 5vw, 4rem);
}
.voices__title { grid-column: 1 / 4; grid-row: 1; font-family: var(--display); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.1; padding-top: .6rem; }
.voice { grid-column: 5 / 12; }
.voice--site { grid-column: 7 / 13; }
.voice blockquote { margin: 0; }
.voice blockquote p {
  font-family: var(--display); font-size: clamp(1.6rem, 2.8vw, 2.5rem); line-height: 1.18; text-wrap: balance;
  text-indent: -.4em;
}
.voice figcaption { display: grid; gap: .2rem; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid rgba(51, 37, 29, .22); max-width: 28rem; }
.voice__name { font-weight: 500; }
.voice__source { font-size: .92rem; color: var(--ink-soft); }
.voice__source a { white-space: nowrap; }
@media (max-width: 899px) {
  .voices__title, .voice, .voice--site { grid-column: 1 / -1; }
  .voice--site { padding-left: clamp(0rem, 8vw, 4rem); }
  .voice blockquote p { text-indent: 0; }
}

/* Contact (painted blue) --------------------------------------------------- */
.contact { background: var(--paint); color: var(--on-dark); padding-block: var(--section); --focus: var(--on-dark); }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 1.75rem); row-gap: 3rem; align-items: start; }
.contact__call { grid-column: 1 / 6; }
.contact__call h2 { font-family: var(--display); font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.05; }
.contact__lead { margin-top: 1rem; max-width: 26rem; color: var(--on-dark-soft); }
.contact__phone {
  display: inline-block; margin-top: 1.75rem;
  font-family: var(--display); font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.05; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .35s var(--ease);
}
.contact__phone:hover { background-size: 100% 1px; }
.contact__email { display: inline-flex; align-items: center; min-height: 44px; margin-top: .75rem; font-size: 1.05rem; word-break: break-word; }
.contact__call .contact__email { display: flex; width: fit-content; }
.contact__area { margin-top: 1.5rem; color: var(--on-dark-soft); font-size: .95rem; }

.callback {
  grid-column: 7 / 13;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgba(241, 236, 228, .22);
  background: rgba(10, 20, 30, .18);
}
.callback h3 { font-family: var(--display); font-size: 1.75rem; line-height: 1.1; }
.callback__demo {
  margin: 1rem 0 1.25rem; padding: .45rem .75rem; text-align: center;
  border: 1px dashed rgba(241, 236, 228, .45); font-size: .88rem; color: var(--on-dark);
}
.field { margin-top: 1rem; }
.field label { display: block; margin-bottom: .35rem; font-size: .92rem; font-weight: 500; }
.field input, .field select {
  width: 100%; min-height: 48px; padding: .6rem .8rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid transparent; border-radius: 2px;
  font-size: 1rem;
}
.field select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232B211B' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: calc(100% - 16px) 50%; background-size: 12px 8px; background-repeat: no-repeat; padding-right: 2.75rem;
}
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }
.field input[aria-invalid="true"] { border-color: #F2B8A0; box-shadow: 0 0 0 1px #F2B8A0; }
.field__err { margin-top: .35rem; font-size: .88rem; color: #F6CDBB; }
.callback__submit { width: 100%; margin-top: 1.5rem; }
.callback__status { margin-top: 1rem; font-size: .95rem; min-height: 1.5em; }
.callback__status:not(:empty) { padding: .8rem .9rem; background: rgba(241, 236, 228, .1); border-left: 2px solid var(--oak); }
@media (max-width: 899px) {
  .contact__call, .callback { grid-column: 1 / -1; }
}

/* Footer (walnut) ---------------------------------------------------------- */
.foot { background: var(--walnut); color: var(--on-dark-soft); padding-block: clamp(3rem, 6vw, 4.5rem) calc(clamp(2rem, 4vw, 3rem) + env(safe-area-inset-bottom)); --focus: var(--on-dark); }
.foot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 1.75rem); row-gap: 2rem; }
.foot__mark { grid-column: 1 / 5; font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; color: var(--on-dark); }
.foot__nav { grid-column: 6 / 9; }
.foot__nav a, .foot__contact a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.foot__nav a:hover, .foot__contact a:hover { color: var(--on-dark); text-decoration: underline; }
.foot__contact { grid-column: 9 / 13; display: flex; flex-direction: column; align-items: flex-start; }
.foot__contact span { padding-top: .5rem; }
.foot__note { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid rgba(241, 236, 228, .16); font-size: .9rem; }
@media (max-width: 899px) {
  .foot__mark { grid-column: 1 / -1; }
  .foot__nav { grid-column: 1 / 7; }
  .foot__contact { grid-column: 7 / 13; }
}
@media (max-width: 519px) {
  .foot__nav, .foot__contact { grid-column: 1 / -1; }
}

/* Lightbox ----------------------------------------------------------------- */
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: #17110D; color: var(--on-dark);
  --focus: var(--on-dark);
}
.lightbox::backdrop { background: rgba(22, 16, 12, .6); }
.lightbox[open] { animation: lb-in .3s ease; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox__stage {
  position: absolute; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vv-h, 100%);
  display: grid; place-items: center;
  padding: calc(64px + env(safe-area-inset-top)) clamp(4.5rem, 7vw, 5.75rem) calc(1.25rem + env(safe-area-inset-bottom));
}
.lightbox__figure { display: grid; justify-items: center; gap: .75rem; max-width: 100%; }
.lightbox__img {
  max-width: 100%; width: auto; height: auto;
  max-height: calc(var(--vv-h, 100dvh) - 64px - 5.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  object-fit: contain; background: rgba(255, 255, 255, .04);
}
.lightbox__cap { font-size: .95rem; text-align: center; color: var(--on-dark); }
.lightbox__count { color: var(--on-dark-soft); margin-left: .5rem; white-space: nowrap; }
.lightbox__nav {
  position: absolute; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 48px; height: 48px;
  background: rgba(22, 16, 12, .55); border: 1px solid rgba(241, 236, 228, .35); border-radius: 50%; color: var(--on-dark);
}
.lightbox__nav:hover { background: rgba(241, 236, 228, .14); }
.lightbox__nav--prev { left: max(.75rem, env(safe-area-inset-left)); }
.lightbox__nav--next { right: max(.75rem, env(safe-area-inset-right)); }
.lightbox__nav span { width: 11px; height: 11px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.lightbox__nav--prev span { transform: translateX(2px) rotate(45deg); }
.lightbox__nav--next span { transform: translateX(-2px) rotate(-135deg); }
.lightbox__close {
  position: fixed; z-index: 2;
  top: var(--lb-top, max(12px, env(safe-area-inset-top)));
  right: var(--lb-right, max(12px, env(safe-area-inset-right)));
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 1rem;
  background: var(--plaster); color: var(--ink); border: 0; border-radius: 22px;
  font-size: .95rem; font-weight: 500;
}
.lightbox__close:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; }
.lightbox__x { position: relative; width: 14px; height: 14px; }
.lightbox__x::before, .lightbox__x::after { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px; background: currentColor; }
.lightbox__x::before { transform: rotate(45deg); }
.lightbox__x::after { transform: rotate(-45deg); }
@media (max-width: 719px), (max-height: 520px) {
  .lightbox__stage { padding-inline: .75rem; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .lightbox__img { max-height: calc(var(--vv-h, 100dvh) - 64px - 76px - 3rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .lightbox__nav { top: auto; translate: none; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .lightbox__nav--prev { left: calc(50% - 60px); }
  .lightbox__nav--next { right: calc(50% - 60px); }
}
@media (max-height: 520px) and (min-width: 600px) {
  .lightbox__stage { padding-top: calc(58px + env(safe-area-inset-top)); padding-inline: 4.5rem; padding-bottom: .75rem; }
  .lightbox__img { max-height: calc(var(--vv-h, 100dvh) - 58px - 3rem - env(safe-area-inset-top)); }
  .lightbox__nav { top: 50%; bottom: auto; translate: 0 -50%; }
  .lightbox__nav--prev { left: max(.75rem, env(safe-area-inset-left)); }
  .lightbox__nav--next { right: max(.75rem, env(safe-area-inset-right)); left: auto; }
}

/* Scroll lock -------------------------------------------------------------- */
body.is-locked { position: fixed; left: 0; right: 0; overflow: hidden; }

/* Approach / generic small screens ---------------------------------------- */
@media (max-width: 899px) {
  .approach__title { grid-column: 1 / -1; }
  .approach__text { grid-column: 1 / 8; }
  .approach__figure { grid-column: 9 / 13; grid-row: 2; margin-top: clamp(2rem, 4vw, 3.5rem); }
}
@media (max-width: 599px) {
  .approach__text { grid-column: 1 / -1; }
  .approach__figure { grid-column: 4 / -1; grid-row: 3; margin-top: 2.25rem; }
  .approach__figure img { max-height: 60vh; }
}

/* Motion preferences ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .hero__slide img { animation: none !important; transform: none !important; }
}