/* A dumecreative website template
   Warm stone neutrals, one walnut accent, one mesh-gradient moment per page. */

:root {
  --ground: #f2efea;
  --ground-2: #e9e4dc;
  --surface: #ffffff;
  --ink: #1b1916;
  --ink-2: #4f4942;
  --ink-3: #6b645b;
  --accent: #7a4b2e;
  --line: rgba(27, 25, 22, 0.09);
  --line-strong: rgba(27, 25, 22, 0.16);
  --danger: #a3342a;
  --shadow-soft: 0 1px 2px rgba(58, 40, 24, 0.04), 0 12px 40px -12px rgba(58, 40, 24, 0.14);

  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-xl: 2rem;
  --radius-lg: 1.5rem;
  --radius-md: 1rem;
  --bezel: 0.375rem;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 80rem;
  --section: clamp(5rem, 11vw, 9rem);

  --z-nav: 20;
  --z-menu: 30;
  --z-dialog: 40;
  --z-grain: 50;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Paper grain — fixed, never scrolls, never intercepts input */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: #e6cdb9; color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0.5rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: calc(var(--z-menu) + 1);
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  transition: top 0.3s var(--ease);
}
.skip-link:focus { top: 1rem; }

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section) calc(var(--section) * 1.1); }

/* ---------- Type ---------- */

.display, h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.75rem, 6.4vw, 5.75rem); line-height: 0.98; }
h2 { font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.02; }
h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

h1 em, h2 em { font-style: italic; color: var(--accent); }

p { margin: 0; text-wrap: pretty; }
.lede { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.55; color: var(--ink-2); max-width: 36rem; }
.muted { color: var(--ink-3); }
.small { font-size: 0.9375rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.eyebrow::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent);
}

.section-head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head--split {
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; }
}

/* ---------- Buttons ---------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-icon: rgba(255, 255, 255, 0.14);
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 3rem;
  padding: 0.375rem 0.375rem 0.375rem 1.375rem;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.5s var(--ease), background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 10px 24px -12px rgba(27, 25, 22, 0.5);
}
.btn:hover { background: #2c2823; }
.btn:active { transform: scale(0.98); }

.btn-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--btn-icon);
  transition: transform 0.5s var(--ease);
}
.btn:hover .btn-icon { transform: translate(3px, -1px) scale(1.05); }
.btn-icon svg { width: 1rem; height: 1rem; }

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  --btn-icon: var(--ground);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft);
}
.btn--light:hover { background: #faf8f5; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 0.6rem);
  transition: background-size 0.5s var(--ease);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow svg { width: 1rem; height: 1rem; transition: transform 0.5s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  top: 1rem;
  left: 50%;
  z-index: var(--z-nav);
  width: min(68rem, calc(100% - 2rem));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.375rem 0.375rem 0.375rem 1.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 1px var(--line), 0 12px 32px -18px rgba(58, 40, 24, 0.35);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  min-height: 2.75rem;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.625rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.wordmark span {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  transform: translateY(1px);
}

.nav-links {
  display: none;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 1rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.nav-links a:hover { background: rgba(27, 25, 22, 0.05); color: var(--ink); }
.nav-links a[aria-current="page"] { background: var(--ink); color: #fff; }

.nav-call { display: none; }
.nav .btn { min-height: 2.75rem; font-size: 0.9375rem; }

.menu-toggle {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
}
.menu-toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1rem;
  height: 1.5px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.5s var(--ease);
}
.menu-toggle span:nth-child(1) { transform: translate(-50%, -4px); }
.menu-toggle span:nth-child(2) { transform: translate(-50%, 3px); }
.menu-open .menu-toggle span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { transform: translate(-50%, 0) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6.5rem var(--gutter) 2rem;
  background: rgba(242, 239, 234, 0.9);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}
.menu-open .menu { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease); }
.menu-open .nav { z-index: calc(var(--z-menu) + 1); }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.menu li { overflow: hidden; }
.menu a:not(.btn) {
  display: block;
  padding-block: 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 12vw, 4rem);
  line-height: 1.1;
  text-decoration: none;
  transform: translateY(110%);
  transition: transform 0.7s var(--ease);
}
.menu a[aria-current="page"] { color: var(--accent); font-style: italic; }
.menu-open .menu a:not(.btn) { transform: none; }
.menu-open .menu li:nth-child(2) a { transition-delay: 0.05s; }
.menu-open .menu li:nth-child(3) a { transition-delay: 0.1s; }
.menu-open .menu li:nth-child(4) a { transition-delay: 0.15s; }
.menu-open .menu li:nth-child(5) a { transition-delay: 0.2s; }
.menu-foot { display: grid; gap: 1rem; }
.menu-open { overflow: hidden; }

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-call { display: inline-flex; }
  .menu-toggle, .menu { display: none; }
}

/* ---------- Double bezel ---------- */

.shell {
  padding: var(--bezel);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft);
}
.core {
  display: block;
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--radius-xl) - var(--bezel));
  background: var(--surface);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* ---------- Hero ---------- */

.hero {
  padding-top: clamp(7.5rem, 14vw, 10rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.hero-grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
}
.hero-copy { display: grid; gap: 1.75rem; justify-items: start; }

.proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.proof li { display: inline-flex; align-items: center; gap: 0.5rem; }
.proof svg { width: 1.125rem; height: 1.125rem; color: var(--accent); }
.proof a { text-decoration: none; }
.proof a:hover { text-decoration: underline; text-underline-offset: 3px; }

.hero-media { position: relative; }
.hero-media .shell--main { aspect-ratio: 5 / 4; }
.hero-media .shell--main img { width: 100%; height: 100%; object-fit: cover; }
.hero-media .shell--inset {
  position: absolute;
  left: -2.5rem;
  bottom: -2.5rem;
  width: 42%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
}
.hero-media .shell--inset .core { border-radius: calc(var(--radius-lg) - var(--bezel)); }
.hero-media .shell--inset img { width: 100%; height: 100%; object-fit: cover; }

.chip {
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
  display: grid;
  gap: 0.125rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.chip strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  color: var(--ink);
}

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1fr 1.05fr; }
}
@media (max-width: 767px) {
  .hero-media .shell--inset { display: none; }
}

/* Page hero (inner pages) */
.page-hero { padding-top: clamp(8rem, 15vw, 11rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.page-hero .container { display: grid; gap: 1.5rem; justify-items: start; }

/* ---------- Bento: work ---------- */

.bento {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.tile {
  min-width: 0;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.6s var(--ease);
}
.tile:active { transform: scale(0.99); }
.tile .core { min-height: 100%; }
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.tile:hover img { transform: scale(1.035); }
.tile-caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 3.5rem 1.25rem 1.125rem;
  background: linear-gradient(to top, rgba(22, 16, 11, 0.82) 0%, rgba(22, 16, 11, 0.5) 55%, rgba(22, 16, 11, 0));
  color: #fff;
}
.tile-title { display: block; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.tile-caption .tile-meta { display: block; font-size: 0.875rem; color: rgba(255, 255, 255, 0.92); }
.tile-go {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.5s var(--ease), background-color 0.4s var(--ease);
}
.tile:hover .tile-go { transform: translate(2px, -2px); background: rgba(255, 255, 255, 0.3); }
.tile-go svg { width: 1rem; height: 1rem; }

.bento-work .tile { aspect-ratio: 4 / 3; }
.bento-work .tile--tall { aspect-ratio: 4 / 5; }

@media (min-width: 768px) {
  .bento-work {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(8.5rem, 13vw, 12rem);
  }
  .bento-work .tile, .bento-work .tile--tall { aspect-ratio: auto; }
  .bento-work .t1 { grid-column: span 7; grid-row: span 3; }
  .bento-work .t2 { grid-column: span 5; grid-row: span 3; }
  .bento-work .t3 { grid-column: span 4; grid-row: span 2; }
  .bento-work .t4 { grid-column: span 4; grid-row: span 2; }
  .bento-work .t5 { grid-column: span 4; grid-row: span 2; }
}

/* ---------- Bento: services ---------- */

.bento-services .card { height: 100%; }
.card-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.card-body p { color: var(--ink-2); max-width: 34rem; }
.card-kicker {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
}
.card-num {
  margin-top: auto;
  padding-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink-3);
}
.card--feature .core { display: grid; }
.card--feature .card-media { position: relative; min-height: 16rem; }
.card--feature .card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card--feature h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.2vw, 2.75rem); letter-spacing: -0.015em; line-height: 1.02; }

.cities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.cities li {
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  background: var(--ground);
  font-size: 0.875rem;
  color: var(--ink-2);
}
.cities li.home { background: var(--ink); color: #fff; }

@media (min-width: 768px) {
  .bento-services { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bento-services .s-kitchen { grid-column: span 12; }
  .bento-services .s-add { grid-column: span 6; }
  .bento-services .s-bath { grid-column: span 6; }
  .bento-services .s-homes { grid-column: span 5; }
  .bento-services .s-finish { grid-column: span 7; }
  .bento-services .s-area { grid-column: span 12; }
  .card--feature .core { grid-template-columns: 1fr 1.1fr; }
}
@media (min-width: 1100px) {
  .bento-services .s-kitchen { grid-column: span 8; grid-row: span 2; }
  .bento-services .s-add { grid-column: span 4; }
  .bento-services .s-bath { grid-column: span 4; }
  .bento-services .s-homes { grid-column: span 4; }
  .bento-services .s-finish { grid-column: span 4; }
  .bento-services .s-area { grid-column: span 4; }
  .card--feature .core { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
}

/* ---------- Process ---------- */

.process {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.process li {
  display: grid;
  gap: 0.75rem;
  padding: 1.75rem 0 2rem;
  border-top: 1px solid var(--line-strong);
  counter-increment: step;
}
.process li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--accent);
}
.process p { color: var(--ink-2); max-width: 28rem; }
@media (min-width: 900px) {
  .process { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}

/* ---------- Founder ---------- */

.founder {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.founder blockquote { margin: 0; }
.founder blockquote p {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.founder blockquote p::before { content: "\201C"; color: var(--accent); }
.founder blockquote p::after { content: "\201D"; color: var(--accent); }
.person { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.person img {
  width: 4rem;
  height: 4rem;
  border-radius: 1.125rem;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--line);
}
.person strong { display: block; font-weight: 600; }
.founder-aside { display: grid; gap: 1.25rem; align-content: start; }
.founder-aside p { color: var(--ink-2); }
@media (min-width: 960px) {
  .founder { grid-template-columns: 1.35fr 0.65fr; }
}

/* ---------- Mesh CTA (the one gradient) ---------- */

.cta .core {
  isolation: isolate;
  display: grid;
  gap: 2.5rem;
  padding: clamp(2rem, 6vw, 5rem);
  min-height: 26rem;
  align-content: end;
  color: #fff;
  background:
    linear-gradient(to top, rgba(20, 13, 9, 0.6), rgba(20, 13, 9, 0) 75%),
    radial-gradient(60% 80% at 88% 8%, rgba(226, 178, 138, 0.95), transparent 60%),
    radial-gradient(50% 70% at 62% 40%, rgba(170, 102, 64, 0.85), transparent 65%),
    radial-gradient(70% 90% at 10% 100%, #1e1611, transparent 70%),
    linear-gradient(135deg, #3a2519, #24190f);
}
.cta .core::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 12%;
  top: 14%;
  width: 16rem;
  height: 16rem;
  border-radius: 38% 62% 55% 45% / 45% 40% 60% 55%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 233, 212, 0.75), rgba(214, 150, 104, 0.2) 60%, transparent 70%);
  filter: blur(22px);
}
.cta .core::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.cta h2 { max-width: 14ch; }
.cta p { color: rgba(255, 255, 255, 0.84); max-width: 30rem; }
.cta .btn--light { --btn-icon: #f2e6db; }
.cta .link-arrow { color: #fff; }
.cta-row { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 900px) {
  .cta-row { grid-template-columns: 1fr auto; }
}

/* ---------- Footer ---------- */

.footer {
  padding-block: 4rem 2.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.footer-grid { display: grid; gap: 2.5rem; }
.footer h2 {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
  margin-bottom: 0.75rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; }
.footer a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; color: var(--ink); }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer address { font-style: normal; line-height: 1.7; }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* ---------- Work page ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding: 0.375rem;
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 1px var(--line);
}
.filters button {
  min-height: 2.75rem;
  padding-inline: 1.125rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.filters button:hover { color: var(--ink); background: rgba(27, 25, 22, 0.05); }
.filters button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.filters .count { margin-left: 0.375rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.filters button[aria-pressed="true"] .count { color: rgba(255, 255, 255, 0.72); }
@media (max-width: 600px) {
  .filters { border-radius: 1.5rem; }
}

.project-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.project-grid .tile { display: block; min-width: 0; aspect-ratio: 4 / 3; width: 100%; padding: var(--bezel); border: 0; text-align: left; cursor: pointer; font: inherit; }
.project-grid .tile[hidden] { display: none; }
@media (min-width: 1100px) {
  .project-grid .tile.wide { grid-column: span 2; aspect-ratio: auto; }
}

.empty[hidden] { display: none; }
.empty {
  display: grid;
  gap: 1rem;
  justify-items: start;
  padding: 3rem 0;
}

/* Lightbox */
.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
}
.lightbox::backdrop { background: rgba(20, 16, 12, 0.94); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gutter);
}
.lb-bar h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.lb-bar p { font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }
.lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 var(--gutter); }
.lb-stage img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 1rem;
  object-fit: contain;
  transition: opacity 0.35s var(--ease);
}
.lb-stage img.is-loading { opacity: 0.25; }
.lb-controls { display: flex; justify-content: center; gap: 0.75rem; padding: 1.25rem var(--gutter) 1.5rem; }
.icon-btn {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), transform 0.4s var(--ease);
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.22); }
.icon-btn:active { transform: scale(0.95); }
.icon-btn svg { width: 1.25rem; height: 1.25rem; }
.lightbox :focus-visible { outline-color: #f0c9a8; }

/* ---------- About ---------- */

.story {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
}
.story-prose { display: grid; gap: 1.25rem; max-width: 38rem; color: var(--ink-2); }
.story-prose p:first-child { font-size: 1.25rem; color: var(--ink); }
@media (min-width: 960px) { .story { grid-template-columns: 0.8fr 1.2fr; } }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.timeline li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line-strong);
}
.timeline li:last-child { border-bottom: 1px solid var(--line-strong); }
.timeline .dot {
  width: 0.625rem;
  height: 0.625rem;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--line-strong);
}
.timeline li:last-child .dot { background: var(--accent); box-shadow: 0 0 0 5px rgba(122, 75, 46, 0.15); }
.timeline p { color: var(--ink-2); }

.advice { display: grid; gap: 1rem; }
@media (min-width: 900px) { .advice { grid-template-columns: repeat(12, minmax(0, 1fr)); } .advice > :nth-child(1) { grid-column: span 7; } .advice > :nth-child(2) { grid-column: span 5; } .advice > :nth-child(3) { grid-column: span 12; } }

.portrait-card .core { display: grid; }
.portrait-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- Contact ---------- */

.contact-grid { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 0.85fr 1.15fr; } }

.contact-info .card-body { gap: 2rem; }
.big-phone {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  line-height: 1;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.big-phone:hover { color: var(--accent); }
.info-list { display: grid; gap: 1.25rem; margin: 0; }
.info-list dt { font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); margin-bottom: 0.25rem; }
.info-list dd { margin: 0; }
.info-list a { display: inline-flex; align-items: center; min-height: 2.75rem; text-underline-offset: 3px; }

.form { display: grid; gap: 1.25rem; }
.form-row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.5rem; }
.field label { font-size: 0.9375rem; font-weight: 500; }
.field .opt { font-weight: 400; color: var(--ink-3); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 0.875rem;
  background: var(--ground);
  box-shadow: inset 0 0 0 1px transparent;
  font-size: 1rem;
  transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234f4942' stroke-width='1.5'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}
.field input:hover, .field select:hover, .field textarea:hover { background-color: var(--ground-2); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background-color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.field [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--danger); background-color: #fff; }
.field-error { display: none; font-size: 0.875rem; color: var(--danger); }
.field-error:not(:empty) { display: block; }
.hint { font-size: 0.875rem; color: var(--ink-3); }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.btn[aria-busy="true"] .btn-icon svg { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.notice {
  display: grid;
  gap: 0.375rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--ground);
  box-shadow: inset 0 0 0 1px var(--line);
}
.notice strong { font-weight: 600; }
.notice--ok { background: #eef1ea; }
.notice--err { background: #f6ebe8; }
.notice[hidden] { display: none; }

/* ---------- 404 ---------- */
.lost { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 8rem var(--gutter) 4rem; }
.lost .container { display: grid; gap: 1.5rem; justify-items: center; }
.lost .actions { justify-content: center; }

/* ---------- Reveal ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(2rem);
  filter: blur(6px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
}

/* Work grid: photos never set row height; the 4:3 tiles do */
.project-grid .tile img { position: absolute; inset: 0; }

/* About: photo card keeps its own height and follows the story on desktop */
.portrait-card { align-self: start; }
@media (min-width: 960px) { .portrait-card { position: sticky; top: 6.5rem; } }

/* ---------- dumecreative template: grids resized for this template's counts ---------- */
/* Home gallery: three tiles, not five. The third runs the full width. */
@media (min-width: 768px) {
  .bento-work .t3 { grid-column: span 12; grid-row: span 2; }
}
/* Services bento: five cards, not six, and bathrooms is the feature. */
@media (min-width: 768px) {
  .bento-services .s-one { grid-column: span 12; }
  .bento-services .s-two { grid-column: span 6; }
  .bento-services .s-three { grid-column: span 6; }
  .bento-services .s-four { grid-column: span 12; }
  .bento-services .s-area { grid-column: span 12; }
}
@media (min-width: 1100px) {
  .bento-services .s-one { grid-column: span 8; grid-row: span 2; }
  .bento-services .s-two { grid-column: span 4; }
  .bento-services .s-three { grid-column: span 4; }
  .bento-services .s-four { grid-column: span 6; }
  .bento-services .s-area { grid-column: span 6; }
}
/* Process strip: five stages, not four. Three across in the middle, so the
   copy does not go to one word a line on a laptop. */
@media (min-width: 900px) { .process { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
@media (min-width: 1240px) { .process { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; } }
/* About page advice bento: four cards, not three. */
@media (min-width: 900px) {
  .advice > :nth-child(1) { grid-column: span 7; }
  .advice > :nth-child(2) { grid-column: span 5; }
  .advice > :nth-child(3) { grid-column: span 5; }
  .advice > :nth-child(4) { grid-column: span 7; }
}
/* The shared disclosure bar is fixed 16px off the bottom of the viewport, and
   the mobile menu pins its own foot to that same edge. template-bar.js now
   publishes the bar's rendered height as --tplbar-h on the root element and
   removes the property when the bar is dismissed, so the reservation tracks
   the real bar at any name length and any width, and disappears with it.
   The 16px is the bar's own offset; the -16px fallback cancels both added
   terms, so with no bar the padding is exactly the source's 2rem. */
@media (max-width: 899px) {
  .menu { padding-bottom: calc(2rem + var(--tplbar-h, -16px) + 16px); }
}
/* The lightbox now prints each project's one-line summary under the counter.
   .lb-bar p already styles it; it only needs a measure so a sentence does not
   run the width of a desktop screen, and the tabular figures the counter asks
   for are wrong for prose. */
.lb-bar .lb-note { max-width: 56ch; font-variant-numeric: normal; }
/* The lightbox hides its prev/next pair for a single-photograph project, and
   .lb-controls sets display:flex, which would otherwise beat [hidden]. */
.lb-controls[hidden] { display: none; }
/* Footer: three columns, not four. */
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
/* The footer's page links were 44px tall but only as wide as a short word (Work
   measured 36px): a 44px minimum both ways, the hit area running into the space
   beside the word. */
.footer ul a { min-width: 2.75rem; }
/* The phone number is plain text everywhere, so the footer's and the menu's
   phone lines are spans rather than links and need the link's metrics back. */
.footer-grid p, .menu-foot .btn { margin: 0; }
.footer address { margin-bottom: 0.25rem; }