/* ============================================
   A&K STONE MASONRY — DESIGN SYSTEM
   Editorial / Architectural Monograph
   ============================================ */

:root {
  /* Brand palette — pulled from brand guide */
  --slate-blue: #6B7E96;          /* primary brand blue from guide */
  --slate-blue-dark: #4D5C72;
  --slate-blue-deep: #3A475A;
  --parchment: #E8E1D3;           /* cream/parchment from guide */
  --parchment-warm: #DDD3BE;
  --bone: #F1ECE2;
  --charcoal: #1A1A1A;
  --ink: #0E1014;
  --stone-light: #C8C4BC;
  --stone-mid: #8B8985;
  --moss: #4A5648;                /* from the mountain photo tone */
  --rust: #8B5A3C;                /* warm accent — sparing use */

  /* Typography */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-mono: 'Archivo Narrow', 'Helvetica Neue', sans-serif;
  --font-body: 'Archivo', 'Helvetica Neue', sans-serif;

  /* Scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  --space-2xl: 12rem;

  /* Layout */
  --margin-x: clamp(1.5rem, 5vw, 5rem);
  --max-w: 1600px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--parchment);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  cursor: none;
}

/* Subtle paper grain — pulls from the vintage texture in brand */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.28 0 0 0 0 0.25 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================
   CUSTOM CURSOR
   ============================================ */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--parchment);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease, opacity 0.3s ease;
  mix-blend-mode: difference;
}
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid var(--parchment);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
  mix-blend-mode: difference;
}
.cursor-dot.active, .cursor-ring.active { opacity: 1; }
.cursor-ring.hover {
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border-color: var(--parchment);
}
.cursor-dot.hover {
  width: 0;
  height: 0;
  margin: 0;
}
.cursor-ring.view::after {
  content: 'VIEW';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--parchment);
  mix-blend-mode: difference;
}
@media (max-width: 900px) {
  body { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
}

/* ============================================
   NAVIGATION — top bar with discrete monogram
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1rem var(--margin-x);
  background: rgba(14, 16, 20, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--parchment);
  border-bottom: 1px solid rgba(232, 225, 211, 0.08);
}
.nav-mono {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}
.nav-logo-img {
  height: 32px;
  width: auto;
  flex-shrink: 0;
}
.nav-mono-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  line-height: 1.1;
}
.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  position: relative;
  padding: 4px 0;
  transition: opacity 0.3s ease;
}
.nav-links a::before {
  content: counter(navcount, decimal-leading-zero);
  counter-increment: navcount;
  position: absolute;
  top: -10px;
  left: 0;
  font-size: 8px;
  opacity: 0.5;
}
.nav-links {
  counter-reset: navcount;
}
.nav-links a:hover { opacity: 0.6; }
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
}
.nav-cta {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  padding: 0.6rem 1.2rem;
  border: 1px solid currentColor;
  transition: background 0.3s ease, color 0.3s ease;
}
.nav-cta:hover {
  background: currentColor;
  color: var(--ink);
}

/* Mobile hamburger */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0.5rem;
  flex-direction: column;
  gap: 5px;
  justify-self: end;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  top: 0;
  background: rgba(14, 16, 20, 0.97);
  z-index: 99;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 5rem 2rem;
}
.nav-mobile-overlay.open { display: flex; }
.nav-mobile-overlay a {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2rem;
  color: var(--parchment);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
}
.nav-mobile-overlay a:hover { color: var(--parchment-warm); }
.nav-mobile-overlay a em { font-style: italic; color: var(--slate-blue); }

@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; padding: 1rem 1.5rem; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .nav-logo-img { height: 24px; }
  .nav-mono-text { font-size: 9px; }
}

/* ============================================
   PAGE TRANSITIONS — page system
   ============================================ */
/* Page entry animation */
main {
  animation: pageEnter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   SHARED — type system
   ============================================ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--slate-blue-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
.display-xl {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 8.5vw, 8rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 144, "SOFT" 0;
}
.display-lg {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144;
}
.display-md {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.display-italic {
  font-style: italic;
  font-weight: 300;
}
.body-lg {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--charcoal);
}
.body-md {
  font-size: 16px;
  line-height: 1.7;
  color: var(--charcoal);
  font-weight: 400;
}

/* ============================================
   HOME — Hero
   ============================================ */
.hero {
  min-height: 100vh;
  position: relative;
  background: var(--ink);
  color: var(--parchment);
  overflow: hidden;
  padding: 8rem var(--margin-x) 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Mountain texture backdrop — refers to the brand's vintage mountain mood */
.hero-bg {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(232, 225, 211, 0.15) 0%, transparent 50%),
    linear-gradient(180deg, var(--ink) 0%, var(--slate-blue-deep) 100%);
}
.hero-bg svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  opacity: 0.4;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}

.hero-headline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.hero-headline h1 {
  margin: 0;
}
.hero-line {
  display: block;
  overflow: hidden;
}
.hero-line span {
  display: inline-block;
  animation: heroReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-line:nth-child(1) span { animation-delay: 0.2s; }
.hero-line:nth-child(2) span { animation-delay: 0.35s; }
.hero-line:nth-child(3) span { animation-delay: 0.5s; }
@keyframes heroReveal {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}
.hero-headline em {
  font-style: italic;
  font-weight: 300;
  color: var(--parchment-warm);
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: end;
  padding-top: 3rem;
  border-top: 1px solid rgba(232, 225, 211, 0.2);
  animation: fadeIn 1s ease 0.9s both;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-meta-item {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchment-warm);
}
.hero-meta-item strong {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 2rem;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-bottom: 0.4rem;
  color: var(--parchment);
}

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: var(--margin-x);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--parchment-warm);
  z-index: 3;
}
.hero-scroll-line {
  width: 1px;
  height: 40px;
  background: var(--parchment-warm);
  position: relative;
  overflow: hidden;
}
.hero-scroll-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--parchment);
  animation: scrollPulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes scrollPulse {
  0% { top: -100%; }
  60%, 100% { top: 100%; }
}

/* Top right corner mark */
.hero-corner {
  position: absolute;
  top: 8rem;
  right: var(--margin-x);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: right;
  color: var(--parchment-warm);
  z-index: 2;
  line-height: 1.7;
  animation: fadeIn 1s ease 1.1s both;
}
@media (max-width: 900px) {
  .hero-corner { display: none; }
  .hero-meta { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .hero-meta-item strong { font-size: 1.4rem; }
}

/* ============================================
   MANIFESTO — slow read section
   ============================================ */
.manifesto {
  padding: 10rem var(--margin-x);
  background: var(--parchment);
  position: relative;
}
.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 6rem;
  max-width: var(--max-w);
  margin: 0 auto;
}
.manifesto-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--slate-blue-dark);
  position: sticky;
  top: 8rem;
  align-self: start;
}
.manifesto-label-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.5rem;
  display: block;
  margin-bottom: 1rem;
  color: var(--ink);
  letter-spacing: -0.02em;
  text-transform: none;
}
.manifesto-body p {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 2rem;
  color: var(--ink);
}
.manifesto-body p:last-child { margin-bottom: 0; }
.manifesto-body em {
  font-style: italic;
  color: var(--slate-blue-dark);
}
.manifesto-body strong {
  font-style: italic;
  font-weight: 400;
  color: var(--moss);
}
@media (max-width: 900px) {
  .manifesto { padding: 5rem 1.5rem; }
  .manifesto-grid { grid-template-columns: 1fr; gap: 2rem; }
  .manifesto-label { position: static; }
}

/* ============================================
   LINEAGE — five-generation ledger
   ============================================ */
.lineage {
  background: var(--bone);
  padding: 8rem var(--margin-x);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--stone-light);
  border-bottom: 1px solid var(--stone-light);
}
.lineage::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 39px,
      rgba(74, 86, 72, 0.04) 39px,
      rgba(74, 86, 72, 0.04) 40px
    );
  pointer-events: none;
}
.lineage-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
}
.lineage-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4rem;
  align-items: end;
  margin-bottom: 5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--ink);
}
.lineage-header h2 em { font-style: italic; color: var(--slate-blue-dark); }
.lineage-header-side {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.7;
  color: var(--slate-blue-dark);
}
.lineage-header-side em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: -0.01em;
  display: block;
  margin-top: 0.4rem;
  color: var(--ink);
}

.lineage-ledger {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  padding: 3rem 0 1rem;
}
.lineage-ledger::before {
  content: '';
  position: absolute;
  top: 6.2rem;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
  z-index: 1;
}

.gen {
  position: relative;
  padding: 0 1.5rem;
  border-right: 1px dashed var(--stone-light);
  z-index: 2;
}
.gen:first-child { padding-left: 0; }
.gen:last-child { padding-right: 0; border-right: none; }

.gen-roman {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--slate-blue-dark);
  margin-bottom: 0.4rem;
}
.gen-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--slate-blue-dark);
  margin-bottom: 1rem;
  display: block;
}

.gen-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bone);
  border: 1px solid var(--ink);
  margin-bottom: 1.5rem;
  position: relative;
}
.gen.present .gen-dot {
  background: var(--slate-blue-dark);
  border-color: var(--slate-blue-dark);
  box-shadow: 0 0 0 4px var(--bone), 0 0 0 5px var(--slate-blue-dark);
}

.gen-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  color: var(--ink);
}
.gen-name em { font-style: italic; color: var(--slate-blue-dark); }
.gen-detail {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal);
  line-height: 1.6;
  opacity: 0.75;
}

.gen.present .gen-roman { color: var(--ink); }
.gen.present .gen-name { font-style: italic; }
.gen.present::before {
  content: 'PRESENT';
  position: absolute;
  top: -1.5rem;
  left: 1.5rem;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--slate-blue-dark);
}

.lineage-coda {
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
}
.lineage-coda-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--slate-blue-dark);
}
.lineage-coda p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.lineage-coda em { font-style: italic; color: var(--slate-blue-dark); }

@media (max-width: 900px) {
  .lineage { padding: 4rem 1.5rem; }
  .lineage-header { grid-template-columns: 1fr; gap: 1.5rem; }
  .lineage-header-side { text-align: left; }
  .lineage-ledger {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: 1rem;
  }
  .lineage-ledger::before { display: none; }
  .gen {
    padding: 1.5rem 0 1.5rem 2rem;
    border-right: none;
    border-left: 1px solid var(--stone-light);
  }
  .gen:first-child { padding-left: 2rem; }
  .gen:last-child { padding-right: 0; }
  .gen.present { border-left-color: var(--slate-blue-dark); border-left-width: 2px; }
  .gen.present::before { left: 2rem; top: 0; }
  .gen-dot { display: none; }
  .lineage-coda { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ============================================
   FEATURED PROJECTS — asymmetric editorial
   ============================================ */
.projects-feature {
  padding: 6rem var(--margin-x) 10rem;
  background: var(--parchment);
}
.projects-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-bottom: 5rem;
  gap: 2rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2rem;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}
.projects-header .display-md { max-width: 800px; }
.projects-header em { font-style: italic; }
.projects-header-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.7;
  color: var(--slate-blue-dark);
}

.project-row {
  display: grid;
  max-width: var(--max-w);
  margin: 0 auto 8rem;
  position: relative;
}
.project-row:last-child { margin-bottom: 0; }

/* Asymmetric layouts — each project breaks the grid differently */
.project-row.layout-1 {
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
}
.project-row.layout-2 {
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
  align-items: start;
}
.project-row.layout-2 .project-image { order: 2; }
.project-row.layout-2 .project-meta { order: 1; padding-top: 4rem; }
.project-row.layout-3 {
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: center;
}

.project-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--stone-mid);
}
.project-row.layout-1 .project-image { aspect-ratio: 4 / 5; }
.project-row.layout-2 .project-image { aspect-ratio: 16 / 10; }
.project-row.layout-3 .project-image { aspect-ratio: 1 / 1; }

.project-image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;
  color: var(--parchment);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  /* Stone texture via SVG pattern */
  background:
    linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cdefs%3E%3CradialGradient id='g' cx='40%25' cy='30%25'%3E%3Cstop offset='0%25' stop-color='%238B8985'/%3E%3Cstop offset='100%25' stop-color='%234D5C72'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='400' height='500' fill='url(%23g)'/%3E%3Cg opacity='0.4' fill='%23000'%3E%3Cpolygon points='50,80 180,60 220,150 90,180'/%3E%3Cpolygon points='240,90 360,70 380,200 260,220'/%3E%3Cpolygon points='80,210 200,230 240,330 100,360'/%3E%3Cpolygon points='260,260 380,250 360,380 250,400'/%3E%3Cpolygon points='40,390 160,380 180,470 50,490'/%3E%3Cpolygon points='200,420 340,410 360,490 220,490'/%3E%3C/g%3E%3Cg opacity='0.25' fill='%23E8E1D3'%3E%3Cpolygon points='60,100 160,90 200,160 100,170'/%3E%3Cpolygon points='270,110 350,100 360,180 280,200'/%3E%3Cpolygon points='110,240 190,250 220,320 130,340'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-image:hover .project-image-placeholder {
  transform: scale(1.04);
}
.project-image-placeholder::after {
  content: 'IMAGE PLACEHOLDER · CLIENT TO PROVIDE';
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.25em;
  opacity: 0.6;
}

.project-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 5rem;
  line-height: 1;
  color: var(--parchment);
  letter-spacing: -0.04em;
}

.project-meta h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  color: var(--ink);
}
.project-meta h3 em {
  font-style: italic;
  color: var(--slate-blue-dark);
}
.project-meta-spec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 2rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--stone-light);
}
.project-meta-spec dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--slate-blue-dark);
  padding-top: 2px;
}
.project-meta-spec dd {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}

.project-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--slate-blue-dark);
  margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
  .projects-feature { padding: 4rem 1.5rem 6rem; }
  .projects-header { grid-template-columns: 1fr; }
  .projects-header-meta { text-align: left; }
  .project-row,
  .project-row.layout-1,
  .project-row.layout-2,
  .project-row.layout-3 {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
  }
  .project-row.layout-2 .project-image { order: 1; }
  .project-row.layout-2 .project-meta { order: 2; padding-top: 0; }
}

/* ============================================
   MATERIALS ATLAS — breadth showcase
   ============================================ */
.atlas {
  background: var(--parchment);
  padding: 8rem var(--margin-x) 6rem;
  position: relative;
  border-top: 1px solid var(--stone-light);
}
.atlas-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.atlas-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--ink);
}
.atlas-header h2 em { font-style: italic; color: var(--slate-blue-dark); }
.atlas-header-side {
  font-size: 16px;
  line-height: 1.65;
  color: var(--charcoal);
  max-width: 480px;
  justify-self: end;
}
.atlas-header-side em { font-style: italic; color: var(--slate-blue-dark); }

/* Atlas grid */
.atlas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.atlas-card {
  background: var(--bone);
  border: 1px solid var(--stone-light);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}
.atlas-card:hover {
  transform: translateY(-4px);
  border-color: var(--ink);
}

.atlas-swatch {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.atlas-swatch-fill {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.atlas-card:hover .atlas-swatch-fill { transform: scale(1.06); }

/* Swatch styles for each material — texture via SVG patterns */
.swatch-ledgestone {
  background:
    linear-gradient(135deg, rgba(0,0,0,0.2), rgba(0,0,0,0.05)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23736B5E' width='400' height='300'/%3E%3Cg opacity='0.7'%3E%3Crect x='0' y='10' width='110' height='22' fill='%235A5249'/%3E%3Crect x='115' y='8' width='160' height='25' fill='%238B7E6B'/%3E%3Crect x='280' y='12' width='120' height='20' fill='%23665C50'/%3E%3Crect x='0' y='38' width='180' height='18' fill='%237D7263'/%3E%3Crect x='185' y='40' width='95' height='20' fill='%234E4640'/%3E%3Crect x='285' y='38' width='115' height='22' fill='%23827666'/%3E%3Crect x='0' y='65' width='75' height='24' fill='%235D5447'/%3E%3Crect x='80' y='68' width='190' height='20' fill='%238F8273'/%3E%3Crect x='275' y='65' width='125' height='25' fill='%236A6053'/%3E%3Crect x='0' y='95' width='140' height='18' fill='%237A6F60'/%3E%3Crect x='145' y='93' width='110' height='22' fill='%23534B40'/%3E%3Crect x='260' y='95' width='140' height='20' fill='%23877B6C'/%3E%3Crect x='0' y='120' width='90' height='25' fill='%236B6253'/%3E%3Crect x='95' y='123' width='180' height='20' fill='%23807467'/%3E%3Crect x='280' y='120' width='120' height='23' fill='%235E5648'/%3E%3Crect x='0' y='150' width='160' height='22' fill='%237D7264'/%3E%3Crect x='165' y='152' width='130' height='18' fill='%23574F44'/%3E%3Crect x='300' y='150' width='100' height='24' fill='%238A7E6F'/%3E%3Crect x='0' y='178' width='115' height='20' fill='%23635A4D'/%3E%3Crect x='120' y='180' width='150' height='22' fill='%23827669'/%3E%3Crect x='275' y='178' width='125' height='20' fill='%23574F44'/%3E%3Crect x='0' y='205' width='100' height='25' fill='%23736A5C'/%3E%3Crect x='105' y='208' width='170' height='20' fill='%23574F44'/%3E%3Crect x='280' y='205' width='120' height='25' fill='%237D7263'/%3E%3Crect x='0' y='235' width='200' height='20' fill='%23877B6C'/%3E%3Crect x='205' y='237' width='95' height='22' fill='%235E5648'/%3E%3Crect x='305' y='235' width='95' height='20' fill='%237A6F60'/%3E%3Crect x='0' y='262' width='140' height='25' fill='%23665D50'/%3E%3Crect x='145' y='265' width='130' height='20' fill='%23807467'/%3E%3Crect x='280' y='262' width='120' height='25' fill='%235D5447'/%3E%3C/g%3E%3C/svg%3E");
}
.swatch-limestone {
  background:
    linear-gradient(135deg, rgba(0,0,0,0.15), rgba(0,0,0,0.02)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23C8BFA8' width='400' height='300'/%3E%3Cg opacity='0.4'%3E%3Crect x='0' y='0' width='130' height='75' fill='%23B8AE96'/%3E%3Crect x='133' y='0' width='130' height='75' fill='%23D4CCB6'/%3E%3Crect x='266' y='0' width='134' height='75' fill='%23BDB39C'/%3E%3Crect x='0' y='78' width='95' height='75' fill='%23CFC6AE'/%3E%3Crect x='98' y='78' width='160' height='75' fill='%23ADA48C'/%3E%3Crect x='261' y='78' width='139' height='75' fill='%23C5BCA5'/%3E%3Crect x='0' y='156' width='160' height='75' fill='%23B5AB94'/%3E%3Crect x='163' y='156' width='100' height='75' fill='%23D2C9B2'/%3E%3Crect x='266' y='156' width='134' height='75' fill='%23B0A68F'/%3E%3Crect x='0' y='234' width='130' height='66' fill='%23CCC2AB'/%3E%3Crect x='133' y='234' width='160' height='66' fill='%23B8AE96'/%3E%3Crect x='296' y='234' width='104' height='66' fill='%23D5CCB6'/%3E%3C/g%3E%3Cg opacity='0.3' fill='%23000'%3E%3Ccircle cx='80' cy='40' r='1.5'/%3E%3Ccircle cx='180' cy='30' r='1'/%3E%3Ccircle cx='320' cy='50' r='1.2'/%3E%3Ccircle cx='50' cy='120' r='1'/%3E%3Ccircle cx='220' cy='130' r='1.5'/%3E%3Ccircle cx='350' cy='110' r='1'/%3E%3Ccircle cx='100' cy='200' r='1.2'/%3E%3Ccircle cx='280' cy='190' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
.swatch-sandstone {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='sg' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23B58A5C'/%3E%3Cstop offset='25%25' stop-color='%23A57E54'/%3E%3Cstop offset='50%25' stop-color='%23BC9166'/%3E%3Cstop offset='75%25' stop-color='%239E7849'/%3E%3Cstop offset='100%25' stop-color='%23B5895B'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23sg)' width='400' height='300'/%3E%3Cg opacity='0.5' stroke='%23000' stroke-width='0.3' fill='none'%3E%3Cpath d='M0,40 Q200,32 400,42'/%3E%3Cpath d='M0,75 Q200,70 400,82'/%3E%3Cpath d='M0,115 Q200,108 400,118'/%3E%3Cpath d='M0,150 Q200,145 400,155'/%3E%3Cpath d='M0,190 Q200,180 400,192'/%3E%3Cpath d='M0,225 Q200,220 400,232'/%3E%3Cpath d='M0,260 Q200,253 400,265'/%3E%3C/g%3E%3C/svg%3E");
}
.swatch-granite {
  background:
    linear-gradient(135deg, rgba(0,0,0,0.2), rgba(0,0,0,0)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%233A3A3D' width='400' height='300'/%3E%3Cg%3E%3Ccircle cx='30' cy='40' r='6' fill='%23E8E1D3' opacity='0.5'/%3E%3Ccircle cx='80' cy='65' r='4' fill='%23807774' opacity='0.7'/%3E%3Ccircle cx='150' cy='30' r='8' fill='%231A1A1A'/%3E%3Ccircle cx='220' cy='55' r='5' fill='%23E8E1D3' opacity='0.6'/%3E%3Ccircle cx='280' cy='40' r='7' fill='%23645C58'/%3E%3Ccircle cx='340' cy='70' r='4' fill='%23807774' opacity='0.6'/%3E%3Ccircle cx='370' cy='30' r='6' fill='%23E8E1D3' opacity='0.4'/%3E%3Ccircle cx='40' cy='100' r='5' fill='%23807774' opacity='0.7'/%3E%3Ccircle cx='110' cy='110' r='8' fill='%231A1A1A'/%3E%3Ccircle cx='180' cy='95' r='4' fill='%23E8E1D3' opacity='0.5'/%3E%3Ccircle cx='250' cy='115' r='6' fill='%23645C58'/%3E%3Ccircle cx='320' cy='100' r='5' fill='%23807774' opacity='0.6'/%3E%3Ccircle cx='370' cy='130' r='7' fill='%231A1A1A'/%3E%3Ccircle cx='25' cy='160' r='6' fill='%23E8E1D3' opacity='0.5'/%3E%3Ccircle cx='90' cy='150' r='4' fill='%23645C58'/%3E%3Ccircle cx='160' cy='170' r='8' fill='%231A1A1A'/%3E%3Ccircle cx='230' cy='150' r='5' fill='%23E8E1D3' opacity='0.4'/%3E%3Ccircle cx='290' cy='160' r='6' fill='%23807774' opacity='0.6'/%3E%3Ccircle cx='350' cy='180' r='5' fill='%23645C58'/%3E%3Ccircle cx='50' cy='220' r='5' fill='%23E8E1D3' opacity='0.5'/%3E%3Ccircle cx='130' cy='210' r='7' fill='%231A1A1A'/%3E%3Ccircle cx='200' cy='230' r='4' fill='%23807774' opacity='0.6'/%3E%3Ccircle cx='270' cy='215' r='6' fill='%23645C58'/%3E%3Ccircle cx='340' cy='235' r='5' fill='%23E8E1D3' opacity='0.4'/%3E%3Ccircle cx='75' cy='260' r='8' fill='%231A1A1A'/%3E%3Ccircle cx='160' cy='275' r='5' fill='%23807774' opacity='0.6'/%3E%3Ccircle cx='240' cy='265' r='6' fill='%23E8E1D3' opacity='0.5'/%3E%3Ccircle cx='310' cy='280' r='4' fill='%23645C58'/%3E%3Ccircle cx='370' cy='260' r='6' fill='%23807774' opacity='0.7'/%3E%3C/g%3E%3C/svg%3E");
}
.swatch-flagstone {
  background:
    linear-gradient(135deg, rgba(0,0,0,0.15), rgba(0,0,0,0)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%237D7468' width='400' height='300'/%3E%3Cg stroke='%231A1A1A' stroke-width='2' fill='none' opacity='0.6'%3E%3Cpolygon points='5,5 130,15 145,90 50,110 10,80'/%3E%3Cpolygon points='150,10 270,5 285,75 235,100 145,95'/%3E%3Cpolygon points='290,8 395,15 395,85 320,90 285,75'/%3E%3Cpolygon points='10,115 60,115 90,180 30,200 5,170'/%3E%3Cpolygon points='95,180 35,200 50,260 130,275 160,210'/%3E%3Cpolygon points='65,115 145,100 200,140 165,205 95,180'/%3E%3Cpolygon points='205,140 240,105 320,95 310,170 240,180'/%3E%3Cpolygon points='325,90 395,90 395,180 320,170'/%3E%3Cpolygon points='245,180 165,210 130,275 200,290 270,255'/%3E%3Cpolygon points='275,255 200,290 290,295 350,260'/%3E%3Cpolygon points='320,170 240,180 270,255 350,260 395,210 395,180'/%3E%3C/g%3E%3Cg fill='%23625A50' opacity='0.3'%3E%3Cpolygon points='5,5 130,15 145,90 50,110 10,80'/%3E%3Cpolygon points='290,8 395,15 395,85 320,90 285,75'/%3E%3Cpolygon points='205,140 240,105 320,95 310,170 240,180'/%3E%3Cpolygon points='275,255 200,290 290,295 350,260'/%3E%3C/g%3E%3C/svg%3E");
}
.swatch-veneer {
  background:
    linear-gradient(135deg, rgba(0,0,0,0.2), rgba(0,0,0,0.05)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%238B7960' width='400' height='300'/%3E%3Cg opacity='0.6'%3E%3Cpath d='M0,15 L80,8 L100,40 L60,55 L0,50 Z' fill='%23A89578'/%3E%3Cpath d='M105,5 L200,12 L195,45 L110,42 Z' fill='%23756450'/%3E%3Cpath d='M205,8 L300,5 L320,40 L210,48 Z' fill='%2395836A'/%3E%3Cpath d='M325,10 L400,15 L400,55 L330,50 Z' fill='%237B6A56'/%3E%3Cpath d='M0,55 L80,55 L75,98 L20,100 L0,90 Z' fill='%2378674F'/%3E%3Cpath d='M85,55 L180,52 L185,95 L80,100 Z' fill='%2398866C'/%3E%3Cpath d='M190,52 L285,55 L290,98 L195,95 Z' fill='%23695A48'/%3E%3Cpath d='M295,55 L385,52 L400,90 L300,100 Z' fill='%23A08D72'/%3E%3Cpath d='M0,105 L100,100 L95,150 L0,150 Z' fill='%23968370'/%3E%3Cpath d='M105,100 L210,105 L215,148 L100,152 Z' fill='%236F5E4A'/%3E%3Cpath d='M220,105 L310,100 L320,150 L215,148 Z' fill='%23A28F72'/%3E%3Cpath d='M325,100 L400,105 L400,148 L320,150 Z' fill='%23766550'/%3E%3Cpath d='M0,155 L120,150 L115,200 L0,205 Z' fill='%2380705A'/%3E%3Cpath d='M125,150 L230,155 L240,200 L120,200 Z' fill='%23A28F72'/%3E%3Cpath d='M245,155 L355,150 L350,200 L240,200 Z' fill='%23685B47'/%3E%3Cpath d='M360,150 L400,155 L400,200 L355,200 Z' fill='%2398866C'/%3E%3Cpath d='M0,210 L90,205 L95,260 L0,265 Z' fill='%23A89578'/%3E%3Cpath d='M100,205 L210,210 L215,255 L95,260 Z' fill='%23685B47'/%3E%3Cpath d='M220,210 L320,205 L325,260 L215,255 Z' fill='%23968370'/%3E%3Cpath d='M330,205 L400,210 L400,255 L325,260 Z' fill='%23766550'/%3E%3Cpath d='M0,270 L100,265 L105,300 L0,300 Z' fill='%23685B47'/%3E%3Cpath d='M110,265 L240,270 L235,300 L105,300 Z' fill='%23A28F72'/%3E%3Cpath d='M245,270 L380,265 L375,300 L235,300 Z' fill='%23695A48'/%3E%3Cpath d='M385,265 L400,270 L400,300 L375,300 Z' fill='%2398866C'/%3E%3C/g%3E%3C/svg%3E");
}
.swatch-fieldstone {
  background:
    linear-gradient(135deg, rgba(0,0,0,0.2), rgba(0,0,0,0)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23685B4D' width='400' height='300'/%3E%3Cg stroke='%23000' stroke-width='1.5' opacity='0.5'%3E%3Ccircle cx='40' cy='35' r='28' fill='%23827465'/%3E%3Cellipse cx='110' cy='40' rx='35' ry='25' fill='%235A4F42'/%3E%3Ccircle cx='180' cy='30' r='22' fill='%23968870'/%3E%3Cellipse cx='240' cy='45' rx='40' ry='28' fill='%236E6253'/%3E%3Ccircle cx='320' cy='35' r='30' fill='%23857966'/%3E%3Cellipse cx='380' cy='50' rx='25' ry='35' fill='%234E4639'/%3E%3Cellipse cx='30' cy='105' rx='35' ry='28' fill='%2392836E'/%3E%3Ccircle cx='105' cy='100' r='28' fill='%235D5446'/%3E%3Cellipse cx='180' cy='105' rx='32' ry='25' fill='%2380705C'/%3E%3Ccircle cx='250' cy='100' r='25' fill='%234E4639'/%3E%3Cellipse cx='320' cy='110' rx='38' ry='28' fill='%23857966'/%3E%3Ccircle cx='385' cy='95' r='20' fill='%236E6253'/%3E%3Ccircle cx='35' cy='180' r='30' fill='%2370645A'/%3E%3Cellipse cx='110' cy='175' rx='30' ry='28' fill='%23968870'/%3E%3Ccircle cx='180' cy='180' r='25' fill='%234E4639'/%3E%3Cellipse cx='250' cy='175' rx='38' ry='25' fill='%2382755F'/%3E%3Ccircle cx='325' cy='180' r='28' fill='%235D5446'/%3E%3Cellipse cx='385' cy='175' rx='25' ry='30' fill='%2392836E'/%3E%3Cellipse cx='40' cy='250' rx='35' ry='30' fill='%2382755F'/%3E%3Ccircle cx='115' cy='250' r='30' fill='%234E4639'/%3E%3Cellipse cx='190' cy='255' rx='38' ry='28' fill='%23857966'/%3E%3Ccircle cx='265' cy='250' r='28' fill='%235D5446'/%3E%3Cellipse cx='335' cy='255' rx='32' ry='30' fill='%2392836E'/%3E%3Ccircle cx='390' cy='245' r='22' fill='%2370645A'/%3E%3C/g%3E%3C/svg%3E");
}
.swatch-cobblestone {
  background:
    linear-gradient(135deg, rgba(0,0,0,0.2), rgba(0,0,0,0.05)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%234A4642' width='400' height='300'/%3E%3Cg stroke='%231A1A1A' stroke-width='1.5' opacity='0.7'%3E%3Cellipse cx='25' cy='30' rx='22' ry='18' fill='%236E6660'/%3E%3Cellipse cx='80' cy='35' rx='28' ry='20' fill='%23574F46'/%3E%3Cellipse cx='150' cy='28' rx='25' ry='22' fill='%237D7468'/%3E%3Cellipse cx='215' cy='35' rx='30' ry='18' fill='%234A413A'/%3E%3Cellipse cx='285' cy='30' rx='25' ry='22' fill='%23665C50'/%3E%3Cellipse cx='350' cy='35' rx='30' ry='20' fill='%23574F46'/%3E%3Cellipse cx='30' cy='80' rx='28' ry='18' fill='%2378706B'/%3E%3Cellipse cx='95' cy='85' rx='25' ry='22' fill='%23574F46'/%3E%3Cellipse cx='165' cy='80' rx='30' ry='20' fill='%23665C50'/%3E%3Cellipse cx='230' cy='85' rx='22' ry='20' fill='%23857B70'/%3E%3Cellipse cx='290' cy='80' rx='28' ry='22' fill='%234E4640'/%3E%3Cellipse cx='360' cy='85' rx='25' ry='18' fill='%236E6660'/%3E%3Cellipse cx='25' cy='130' rx='25' ry='20' fill='%23574F46'/%3E%3Cellipse cx='90' cy='135' rx='30' ry='22' fill='%237D7468'/%3E%3Cellipse cx='155' cy='130' rx='22' ry='20' fill='%234A413A'/%3E%3Cellipse cx='220' cy='135' rx='28' ry='18' fill='%23665C50'/%3E%3Cellipse cx='285' cy='130' rx='25' ry='22' fill='%23857B70'/%3E%3Cellipse cx='355' cy='135' rx='28' ry='20' fill='%23574F46'/%3E%3Cellipse cx='30' cy='180' rx='28' ry='22' fill='%23665C50'/%3E%3Cellipse cx='95' cy='185' rx='22' ry='18' fill='%2378706B'/%3E%3Cellipse cx='160' cy='180' rx='30' ry='20' fill='%234E4640'/%3E%3Cellipse cx='225' cy='185' rx='25' ry='22' fill='%23857B70'/%3E%3Cellipse cx='290' cy='180' rx='28' ry='18' fill='%23574F46'/%3E%3Cellipse cx='355' cy='185' rx='22' ry='20' fill='%236E6660'/%3E%3Cellipse cx='25' cy='230' rx='25' ry='22' fill='%237D7468'/%3E%3Cellipse cx='90' cy='235' rx='28' ry='18' fill='%23574F46'/%3E%3Cellipse cx='160' cy='230' rx='30' ry='22' fill='%23665C50'/%3E%3Cellipse cx='225' cy='235' rx='25' ry='20' fill='%234E4640'/%3E%3Cellipse cx='290' cy='230' rx='22' ry='22' fill='%23857B70'/%3E%3Cellipse cx='355' cy='235' rx='28' ry='18' fill='%2378706B'/%3E%3Cellipse cx='30' cy='275' rx='22' ry='18' fill='%234E4640'/%3E%3Cellipse cx='90' cy='275' rx='30' ry='20' fill='%23665C50'/%3E%3Cellipse cx='160' cy='275' rx='25' ry='22' fill='%23574F46'/%3E%3Cellipse cx='225' cy='275' rx='28' ry='18' fill='%237D7468'/%3E%3Cellipse cx='290' cy='275' rx='25' ry='20' fill='%234A413A'/%3E%3Cellipse cx='355' cy='275' rx='30' ry='22' fill='%23665C50'/%3E%3C/g%3E%3C/svg%3E");
}

.atlas-card-meta {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}
.atlas-card-num {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--slate-blue-dark);
}
.atlas-card-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.atlas-card-name em { font-style: italic; color: var(--slate-blue-dark); }
.atlas-card-spec {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed var(--stone-light);
}
.atlas-card-spec span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0.7;
}
.atlas-card-example {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--charcoal);
  letter-spacing: -0.005em;
}

.atlas-coda {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4rem;
  align-items: center;
}
.atlas-coda p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.4;
  color: var(--ink);
  max-width: 800px;
}
.atlas-coda em { font-style: italic; color: var(--slate-blue-dark); }

@media (max-width: 1100px) {
  .atlas-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .atlas { padding: 4rem 1.5rem 3rem; }
  .atlas-header { grid-template-columns: 1fr; gap: 1.5rem; }
  .atlas-header-side { justify-self: start; }
  .atlas-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .atlas-coda { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .atlas-grid { grid-template-columns: 1fr; }
}

/* ============================================
   PROCESS — numbered, editorial
   ============================================ */
.process {
  padding: 10rem var(--margin-x);
  background: var(--ink);
  color: var(--parchment);
  position: relative;
  overflow: hidden;
}
.process::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 20% 100%, rgba(107, 126, 150, 0.18) 0%, transparent 50%);
  pointer-events: none;
}
.process-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
}
.process-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 6rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(232, 225, 211, 0.2);
}
.process-header h2 em { font-style: italic; }
.process-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  list-style: none;
}
.process-step {
  position: relative;
  padding-top: 2rem;
  border-top: 1px solid rgba(232, 225, 211, 0.3);
}
.process-step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--parchment-warm);
  letter-spacing: -0.02em;
}
.process-step h4 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 1rem;
  letter-spacing: -0.015em;
}
.process-step h4 em {
  font-style: italic;
  color: var(--parchment-warm);
}
.process-step p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--stone-light);
}
@media (max-width: 900px) {
  .process { padding: 5rem 1.5rem; }
  .process-header { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; }
  .process-list { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ============================================
   QUOTE / CTA STRIP
   ============================================ */
.cta-strip {
  padding: 8rem var(--margin-x);
  background: var(--slate-blue);
  color: var(--parchment);
  position: relative;
  overflow: hidden;
}
.cta-strip-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4rem;
  align-items: end;
}
.cta-strip h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.025em;
}
.cta-strip h2 em { font-style: italic; }
.cta-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transition: gap 0.3s ease;
  cursor: none;
}
.cta-link:hover { gap: 1.5rem; }
.cta-link::after {
  content: '→';
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
}
@media (max-width: 900px) {
  .cta-strip { padding: 4rem 1.5rem; }
  .cta-strip-inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ============================================
   ABOUT PAGE
   ============================================ */
.about-hero {
  padding: 12rem var(--margin-x) 6rem;
  background: var(--parchment);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  max-width: var(--max-w);
  margin: 0 auto;
  align-items: end;
}
.about-hero-text h1 {
  margin-bottom: 2rem;
}
.about-hero-text h1 em { font-style: italic; color: var(--slate-blue-dark); }
.about-hero-text .body-lg { color: var(--charcoal); max-width: 540px; }
.about-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-self: end;
  border-left: 1px solid var(--ink);
  padding-left: 2rem;
}
.about-hero-meta-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--stone-light);
}
.about-hero-meta-row:last-child { border-bottom: none; padding-bottom: 0; }
.about-hero-meta-row dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--slate-blue-dark);
}
.about-hero-meta-row dd {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
@media (max-width: 900px) {
  .about-hero { grid-template-columns: 1fr; padding: 7rem 1.5rem 3rem; gap: 3rem; }
  .about-hero-meta { padding-left: 1rem; }
}

.story {
  padding: 6rem var(--margin-x) 10rem;
  background: var(--parchment);
}
.story-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 5rem;
}
.story-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--slate-blue-dark);
  position: sticky;
  top: 8rem;
  align-self: start;
}
.story-label small {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-top: 0.5rem;
  color: var(--ink);
}
.story-body p {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.55;
  font-weight: 400;
  margin-bottom: 1.6rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.story-body p:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 300;
  float: left;
  line-height: 0.85;
  margin: 0.4rem 0.6rem 0 0;
  color: var(--slate-blue-dark);
  font-style: italic;
}
.story-body em { font-style: italic; color: var(--moss); }
.story-pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.3;
  color: var(--slate-blue-deep);
  padding: 2rem 0 2rem 2rem;
  border-left: 2px solid var(--slate-blue);
  margin: 2.5rem 0;
}
@media (max-width: 900px) {
  .story { padding: 3rem 1.5rem 6rem; }
  .story-inner { grid-template-columns: 1fr; gap: 2rem; }
  .story-label { position: static; }
}

.values {
  padding: 8rem var(--margin-x);
  background: var(--ink);
  color: var(--parchment);
}
.values-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.values-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-bottom: 5rem;
  align-items: end;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(232, 225, 211, 0.3);
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(232, 225, 211, 0.2);
  border: 1px solid rgba(232, 225, 211, 0.2);
}
.value-cell {
  background: var(--ink);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 280px;
  position: relative;
  transition: background 0.4s ease;
}
.value-cell:hover { background: var(--slate-blue-deep); }
.value-cell-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: var(--parchment-warm);
  letter-spacing: -0.01em;
}
.value-cell h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.2rem;
  letter-spacing: -0.02em;
  margin-top: auto;
  line-height: 1;
}
.value-cell h3 em { font-style: italic; color: var(--parchment-warm); }
.value-cell p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--stone-light);
  max-width: 360px;
}
@media (max-width: 900px) {
  .values { padding: 4rem 1.5rem; }
  .values-header { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; }
  .values-grid { grid-template-columns: 1fr; }
  .value-cell { padding: 2rem; min-height: 200px; }
}

/* ============================================
   SERVICES PAGE
   ============================================ */
.services-hero {
  padding: 12rem var(--margin-x) 4rem;
  background: var(--parchment);
}
.services-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.services-hero h1 {
  max-width: 1000px;
  margin-bottom: 3rem;
}
.services-hero h1 em { font-style: italic; color: var(--slate-blue-dark); }
.services-hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-top: 1px solid var(--ink);
  padding-top: 2rem;
  flex-wrap: wrap;
  gap: 2rem;
}
.services-hero-meta div {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--slate-blue-dark);
  line-height: 1.7;
}

.service-spread {
  padding: 6rem var(--margin-x);
  border-bottom: 1px solid var(--stone-light);
  background: var(--parchment);
}
.service-spread:nth-child(even) { background: var(--bone); }
.service-spread-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 4rem;
  align-items: start;
}
.service-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 4rem;
  line-height: 1;
  color: var(--slate-blue-dark);
  letter-spacing: -0.04em;
  font-style: italic;
}
.service-num small {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 1rem;
  font-weight: 500;
}
.service-content h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.service-content h2 em { font-style: italic; color: var(--slate-blue-dark); }
.service-content p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--charcoal);
  margin-bottom: 1.2rem;
  max-width: 600px;
}
.service-spec {
  border-left: 1px solid var(--ink);
  padding-left: 1.5rem;
}
.service-spec-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--slate-blue-dark);
  margin-bottom: 1rem;
}
.service-spec ul {
  list-style: none;
}
.service-spec li {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--stone-light);
}
.service-spec li:last-child { border-bottom: none; }
@media (max-width: 900px) {
  .services-hero { padding: 7rem 1.5rem 2rem; }
  .service-spread { padding: 3rem 1.5rem; }
  .service-spread-inner { grid-template-columns: 1fr; gap: 2rem; }
  .service-num { font-size: 2.5rem; }
}

/* ============================================
   PORTFOLIO PAGE
   ============================================ */
.portfolio-hero {
  padding: 12rem var(--margin-x) 4rem;
  background: var(--ink);
  color: var(--parchment);
}
.portfolio-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4rem;
  align-items: end;
}
.portfolio-hero h1 em { font-style: italic; color: var(--parchment-warm); }
.portfolio-hero-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.7;
}
.portfolio-hero-meta strong {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 3rem;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--parchment);
  margin-bottom: 0.3rem;
}

.portfolio-filter {
  padding: 3rem var(--margin-x);
  background: var(--ink);
  color: var(--parchment);
  border-top: 1px solid rgba(232, 225, 211, 0.2);
}
.portfolio-filter-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: center;
}
.portfolio-filter-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--parchment-warm);
  margin-right: 1rem;
}
.filter-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchment);
  background: none;
  border: none;
  padding: 0.5rem 0;
  cursor: none;
  position: relative;
  transition: opacity 0.3s ease;
}
.filter-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.filter-btn.active::after, .filter-btn:hover::after { transform: scaleX(1); }
.filter-btn:not(.active) { opacity: 0.6; }

.portfolio-grid {
  padding: 6rem var(--margin-x) 10rem;
  background: var(--parchment);
}
.portfolio-grid-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3rem 2rem;
}

/* Editorial mosaic — varied sizes */
.portfolio-item {
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
}
.portfolio-item.size-lg { grid-column: span 7; }
.portfolio-item.size-md { grid-column: span 5; }
.portfolio-item.size-sm { grid-column: span 4; }
.portfolio-item.size-wide { grid-column: span 8; }
.portfolio-item.offset-1 { margin-top: 6rem; }
.portfolio-item.offset-2 { margin-top: -2rem; }

.portfolio-item-img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--stone-mid);
  margin-bottom: 1rem;
}
.portfolio-item.size-lg .portfolio-item-img { aspect-ratio: 4 / 5; }
.portfolio-item.size-md .portfolio-item-img { aspect-ratio: 3 / 4; }
.portfolio-item.size-sm .portfolio-item-img { aspect-ratio: 1 / 1; }
.portfolio-item.size-wide .portfolio-item-img { aspect-ratio: 16 / 10; }

.portfolio-item-img-inner {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cdefs%3E%3CradialGradient id='g' cx='40%25' cy='30%25'%3E%3Cstop offset='0%25' stop-color='%238B8985'/%3E%3Cstop offset='100%25' stop-color='%234D5C72'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='400' height='500' fill='url(%23g)'/%3E%3Cg opacity='0.4' fill='%23000'%3E%3Cpolygon points='50,80 180,60 220,150 90,180'/%3E%3Cpolygon points='240,90 360,70 380,200 260,220'/%3E%3Cpolygon points='80,210 200,230 240,330 100,360'/%3E%3Cpolygon points='260,260 380,250 360,380 250,400'/%3E%3Cpolygon points='40,390 160,380 180,470 50,490'/%3E%3Cpolygon points='200,420 340,410 360,490 220,490'/%3E%3C/g%3E%3Cg opacity='0.25' fill='%23E8E1D3'%3E%3Cpolygon points='60,100 160,90 200,160 100,170'/%3E%3Cpolygon points='270,110 350,100 360,180 280,200'/%3E%3Cpolygon points='110,240 190,250 220,320 130,340'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.portfolio-item-img-inner.mat-ledgestone { background: linear-gradient(135deg, rgba(0,0,0,0.35), rgba(0,0,0,0.1)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Crect fill='%23736B5E' width='400' height='500'/%3E%3Cg opacity='0.7'%3E%3Crect x='0' y='10' width='110' height='32' fill='%235A5249'/%3E%3Crect x='115' y='8' width='160' height='35' fill='%238B7E6B'/%3E%3Crect x='280' y='12' width='120' height='30' fill='%23665C50'/%3E%3Crect x='0' y='48' width='180' height='28' fill='%237D7263'/%3E%3Crect x='185' y='50' width='95' height='30' fill='%234E4640'/%3E%3Crect x='285' y='48' width='115' height='32' fill='%23827666'/%3E%3Crect x='0' y='85' width='75' height='34' fill='%235D5447'/%3E%3Crect x='80' y='88' width='190' height='30' fill='%238F8273'/%3E%3Crect x='275' y='85' width='125' height='35' fill='%236A6053'/%3E%3Crect x='0' y='125' width='140' height='28' fill='%237A6F60'/%3E%3Crect x='145' y='123' width='110' height='32' fill='%23534B40'/%3E%3Crect x='260' y='125' width='140' height='30' fill='%23877B6C'/%3E%3Crect x='0' y='160' width='90' height='35' fill='%236B6253'/%3E%3Crect x='95' y='163' width='180' height='30' fill='%23807467'/%3E%3Crect x='280' y='160' width='120' height='33' fill='%235E5648'/%3E%3Crect x='0' y='200' width='160' height='32' fill='%237D7264'/%3E%3Crect x='165' y='202' width='130' height='28' fill='%23574F44'/%3E%3Crect x='300' y='200' width='100' height='34' fill='%238A7E6F'/%3E%3Crect x='0' y='238' width='115' height='30' fill='%23635A4D'/%3E%3Crect x='120' y='240' width='150' height='32' fill='%23827669'/%3E%3Crect x='275' y='238' width='125' height='30' fill='%23574F44'/%3E%3Crect x='0' y='275' width='100' height='35' fill='%23736A5C'/%3E%3Crect x='105' y='278' width='170' height='30' fill='%23574F44'/%3E%3Crect x='280' y='275' width='120' height='35' fill='%237D7263'/%3E%3Crect x='0' y='315' width='200' height='30' fill='%23877B6C'/%3E%3Crect x='205' y='317' width='95' height='32' fill='%235E5648'/%3E%3Crect x='305' y='315' width='95' height='30' fill='%237A6F60'/%3E%3Crect x='0' y='352' width='140' height='35' fill='%23665D50'/%3E%3Crect x='145' y='355' width='130' height='30' fill='%23807467'/%3E%3Crect x='280' y='352' width='120' height='35' fill='%235D5447'/%3E%3Crect x='0' y='395' width='110' height='30' fill='%237D7264'/%3E%3Crect x='115' y='397' width='180' height='32' fill='%234E4640'/%3E%3Crect x='300' y='395' width='100' height='30' fill='%23827666'/%3E%3Crect x='0' y='435' width='150' height='35' fill='%23574F44'/%3E%3Crect x='155' y='438' width='115' height='30' fill='%2378706B'/%3E%3Crect x='275' y='435' width='125' height='35' fill='%23665C50'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; background-position: center; }
.portfolio-item-img-inner.mat-limestone { background: linear-gradient(135deg, rgba(0,0,0,0.2), rgba(0,0,0,0)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Crect fill='%23C8BFA8' width='400' height='500'/%3E%3Cg opacity='0.4'%3E%3Crect x='0' y='0' width='130' height='95' fill='%23B8AE96'/%3E%3Crect x='133' y='0' width='130' height='95' fill='%23D4CCB6'/%3E%3Crect x='266' y='0' width='134' height='95' fill='%23BDB39C'/%3E%3Crect x='0' y='98' width='95' height='100' fill='%23CFC6AE'/%3E%3Crect x='98' y='98' width='160' height='100' fill='%23ADA48C'/%3E%3Crect x='261' y='98' width='139' height='100' fill='%23C5BCA5'/%3E%3Crect x='0' y='201' width='160' height='100' fill='%23B5AB94'/%3E%3Crect x='163' y='201' width='100' height='100' fill='%23D2C9B2'/%3E%3Crect x='266' y='201' width='134' height='100' fill='%23B0A68F'/%3E%3Crect x='0' y='304' width='130' height='95' fill='%23CCC2AB'/%3E%3Crect x='133' y='304' width='160' height='95' fill='%23B8AE96'/%3E%3Crect x='296' y='304' width='104' height='95' fill='%23D5CCB6'/%3E%3Crect x='0' y='402' width='200' height='98' fill='%23ADA48C'/%3E%3Crect x='203' y='402' width='197' height='98' fill='%23C8BFA8'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; background-position: center; }
.portfolio-item-img-inner.mat-sandstone { background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cdefs%3E%3ClinearGradient id='sg' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23B58A5C'/%3E%3Cstop offset='25%25' stop-color='%23A57E54'/%3E%3Cstop offset='50%25' stop-color='%23BC9166'/%3E%3Cstop offset='75%25' stop-color='%239E7849'/%3E%3Cstop offset='100%25' stop-color='%23B5895B'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23sg)' width='400' height='500'/%3E%3Cg opacity='0.5' stroke='%23000' stroke-width='0.5' fill='none'%3E%3Cpath d='M0,60 Q200,52 400,62'/%3E%3Cpath d='M0,115 Q200,108 400,118'/%3E%3Cpath d='M0,175 Q200,168 400,178'/%3E%3Cpath d='M0,230 Q200,222 400,232'/%3E%3Cpath d='M0,290 Q200,280 400,292'/%3E%3Cpath d='M0,345 Q200,338 400,348'/%3E%3Cpath d='M0,400 Q200,392 400,402'/%3E%3Cpath d='M0,455 Q200,445 400,457'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; background-position: center; }
.portfolio-item-img-inner.mat-granite { background: linear-gradient(135deg, rgba(0,0,0,0.25), rgba(0,0,0,0.05)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Crect fill='%233A3A3D' width='400' height='500'/%3E%3Cg%3E%3Ccircle cx='30' cy='40' r='6' fill='%23E8E1D3' opacity='0.5'/%3E%3Ccircle cx='80' cy='65' r='4' fill='%23807774' opacity='0.7'/%3E%3Ccircle cx='150' cy='30' r='8' fill='%231A1A1A'/%3E%3Ccircle cx='220' cy='55' r='5' fill='%23E8E1D3' opacity='0.6'/%3E%3Ccircle cx='280' cy='40' r='7' fill='%23645C58'/%3E%3Ccircle cx='340' cy='70' r='4' fill='%23807774' opacity='0.6'/%3E%3Ccircle cx='370' cy='30' r='6' fill='%23E8E1D3' opacity='0.4'/%3E%3Ccircle cx='40' cy='100' r='5' fill='%23807774' opacity='0.7'/%3E%3Ccircle cx='110' cy='110' r='8' fill='%231A1A1A'/%3E%3Ccircle cx='180' cy='95' r='4' fill='%23E8E1D3' opacity='0.5'/%3E%3Ccircle cx='250' cy='115' r='6' fill='%23645C58'/%3E%3Ccircle cx='320' cy='100' r='5' fill='%23807774' opacity='0.6'/%3E%3Ccircle cx='370' cy='130' r='7' fill='%231A1A1A'/%3E%3Ccircle cx='25' cy='160' r='6' fill='%23E8E1D3' opacity='0.5'/%3E%3Ccircle cx='90' cy='150' r='4' fill='%23645C58'/%3E%3Ccircle cx='160' cy='170' r='8' fill='%231A1A1A'/%3E%3Ccircle cx='230' cy='150' r='5' fill='%23E8E1D3' opacity='0.4'/%3E%3Ccircle cx='290' cy='160' r='6' fill='%23807774' opacity='0.6'/%3E%3Ccircle cx='350' cy='180' r='5' fill='%23645C58'/%3E%3Ccircle cx='50' cy='220' r='5' fill='%23E8E1D3' opacity='0.5'/%3E%3Ccircle cx='130' cy='210' r='7' fill='%231A1A1A'/%3E%3Ccircle cx='200' cy='230' r='4' fill='%23807774' opacity='0.6'/%3E%3Ccircle cx='270' cy='215' r='6' fill='%23645C58'/%3E%3Ccircle cx='340' cy='235' r='5' fill='%23E8E1D3' opacity='0.4'/%3E%3Ccircle cx='75' cy='260' r='8' fill='%231A1A1A'/%3E%3Ccircle cx='160' cy='275' r='5' fill='%23807774' opacity='0.6'/%3E%3Ccircle cx='240' cy='265' r='6' fill='%23E8E1D3' opacity='0.5'/%3E%3Ccircle cx='310' cy='280' r='4' fill='%23645C58'/%3E%3Ccircle cx='370' cy='260' r='6' fill='%23807774' opacity='0.7'/%3E%3Ccircle cx='40' cy='320' r='6' fill='%231A1A1A'/%3E%3Ccircle cx='120' cy='330' r='5' fill='%23E8E1D3' opacity='0.5'/%3E%3Ccircle cx='200' cy='320' r='7' fill='%23645C58'/%3E%3Ccircle cx='280' cy='335' r='4' fill='%23807774' opacity='0.6'/%3E%3Ccircle cx='350' cy='320' r='6' fill='%231A1A1A'/%3E%3Ccircle cx='30' cy='380' r='5' fill='%23E8E1D3' opacity='0.4'/%3E%3Ccircle cx='110' cy='390' r='8' fill='%231A1A1A'/%3E%3Ccircle cx='190' cy='380' r='5' fill='%23807774' opacity='0.6'/%3E%3Ccircle cx='270' cy='395' r='6' fill='%23645C58'/%3E%3Ccircle cx='350' cy='380' r='4' fill='%23E8E1D3' opacity='0.5'/%3E%3Ccircle cx='60' cy='440' r='7' fill='%23807774' opacity='0.7'/%3E%3Ccircle cx='150' cy='450' r='5' fill='%23E8E1D3' opacity='0.4'/%3E%3Ccircle cx='240' cy='440' r='6' fill='%231A1A1A'/%3E%3Ccircle cx='320' cy='455' r='4' fill='%23645C58'/%3E%3Ccircle cx='380' cy='435' r='6' fill='%23807774' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; background-position: center; }
.portfolio-item-img-inner.mat-flagstone { background: linear-gradient(135deg, rgba(0,0,0,0.15), rgba(0,0,0,0)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Crect fill='%237D7468' width='400' height='500'/%3E%3Cg stroke='%231A1A1A' stroke-width='2' fill='none' opacity='0.6'%3E%3Cpolygon points='5,5 130,15 145,90 50,110 10,80'/%3E%3Cpolygon points='150,10 270,5 285,75 235,100 145,95'/%3E%3Cpolygon points='290,8 395,15 395,85 320,90 285,75'/%3E%3Cpolygon points='10,115 60,115 90,180 30,200 5,170'/%3E%3Cpolygon points='95,180 35,200 50,260 130,275 160,210'/%3E%3Cpolygon points='65,115 145,100 200,140 165,205 95,180'/%3E%3Cpolygon points='205,140 240,105 320,95 310,170 240,180'/%3E%3Cpolygon points='325,90 395,90 395,180 320,170'/%3E%3Cpolygon points='245,180 165,210 130,275 200,290 270,255'/%3E%3Cpolygon points='275,255 200,290 290,295 350,260'/%3E%3Cpolygon points='320,170 240,180 270,255 350,260 395,210 395,180'/%3E%3Cpolygon points='5,305 130,285 145,380 50,400 10,370'/%3E%3Cpolygon points='150,290 270,295 285,380 235,400 145,380'/%3E%3Cpolygon points='290,290 395,295 395,375 320,390 285,380'/%3E%3Cpolygon points='5,405 100,395 120,490 30,495 5,470'/%3E%3Cpolygon points='130,400 240,395 235,490 130,495'/%3E%3Cpolygon points='250,400 360,395 395,495 250,495'/%3E%3C/g%3E%3Cg fill='%23625A50' opacity='0.3'%3E%3Cpolygon points='5,5 130,15 145,90 50,110 10,80'/%3E%3Cpolygon points='290,8 395,15 395,85 320,90 285,75'/%3E%3Cpolygon points='205,140 240,105 320,95 310,170 240,180'/%3E%3Cpolygon points='275,255 200,290 290,295 350,260'/%3E%3Cpolygon points='150,290 270,295 285,380 235,400 145,380'/%3E%3Cpolygon points='130,400 240,395 235,490 130,495'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; background-position: center; }
.portfolio-item-img-inner.mat-fieldstone { background: linear-gradient(135deg, rgba(0,0,0,0.2), rgba(0,0,0,0)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Crect fill='%23685B4D' width='400' height='500'/%3E%3Cg stroke='%23000' stroke-width='1.5' opacity='0.5'%3E%3Ccircle cx='40' cy='35' r='28' fill='%23827465'/%3E%3Cellipse cx='110' cy='40' rx='35' ry='25' fill='%235A4F42'/%3E%3Ccircle cx='180' cy='30' r='22' fill='%23968870'/%3E%3Cellipse cx='240' cy='45' rx='40' ry='28' fill='%236E6253'/%3E%3Ccircle cx='320' cy='35' r='30' fill='%23857966'/%3E%3Cellipse cx='380' cy='50' rx='25' ry='35' fill='%234E4639'/%3E%3Cellipse cx='30' cy='105' rx='35' ry='28' fill='%2392836E'/%3E%3Ccircle cx='105' cy='100' r='28' fill='%235D5446'/%3E%3Cellipse cx='180' cy='105' rx='32' ry='25' fill='%2380705C'/%3E%3Ccircle cx='250' cy='100' r='25' fill='%234E4639'/%3E%3Cellipse cx='320' cy='110' rx='38' ry='28' fill='%23857966'/%3E%3Ccircle cx='385' cy='95' r='20' fill='%236E6253'/%3E%3Ccircle cx='35' cy='180' r='30' fill='%2370645A'/%3E%3Cellipse cx='110' cy='175' rx='30' ry='28' fill='%23968870'/%3E%3Ccircle cx='180' cy='180' r='25' fill='%234E4639'/%3E%3Cellipse cx='250' cy='175' rx='38' ry='25' fill='%2382755F'/%3E%3Ccircle cx='325' cy='180' r='28' fill='%235D5446'/%3E%3Cellipse cx='385' cy='175' rx='25' ry='30' fill='%2392836E'/%3E%3Cellipse cx='40' cy='250' rx='35' ry='30' fill='%2382755F'/%3E%3Ccircle cx='115' cy='250' r='30' fill='%234E4639'/%3E%3Cellipse cx='190' cy='255' rx='38' ry='28' fill='%23857966'/%3E%3Ccircle cx='265' cy='250' r='28' fill='%235D5446'/%3E%3Cellipse cx='335' cy='255' rx='32' ry='30' fill='%2392836E'/%3E%3Ccircle cx='390' cy='245' r='22' fill='%2370645A'/%3E%3Cellipse cx='35' cy='325' rx='35' ry='28' fill='%23968870'/%3E%3Ccircle cx='110' cy='325' r='30' fill='%23574F46'/%3E%3Cellipse cx='185' cy='330' rx='35' ry='25' fill='%23857966'/%3E%3Ccircle cx='265' cy='325' r='28' fill='%23645C50'/%3E%3Cellipse cx='340' cy='330' rx='30' ry='28' fill='%2392836E'/%3E%3Cellipse cx='40' cy='400' rx='32' ry='25' fill='%2382755F'/%3E%3Ccircle cx='120' cy='395' r='30' fill='%234E4639'/%3E%3Cellipse cx='200' cy='400' rx='35' ry='28' fill='%23857966'/%3E%3Ccircle cx='275' cy='400' r='25' fill='%235D5446'/%3E%3Cellipse cx='345' cy='395' rx='30' ry='28' fill='%2370645A'/%3E%3Cellipse cx='40' cy='465' rx='35' ry='25' fill='%2392836E'/%3E%3Ccircle cx='120' cy='470' r='28' fill='%23574F46'/%3E%3Cellipse cx='200' cy='465' rx='35' ry='30' fill='%23857966'/%3E%3Ccircle cx='280' cy='470' r='25' fill='%23645C50'/%3E%3Cellipse cx='350' cy='465' rx='30' ry='30' fill='%2382755F'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; background-position: center; }
.portfolio-item-img-inner.mat-cobblestone { background: linear-gradient(135deg, rgba(0,0,0,0.25), rgba(0,0,0,0.05)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Crect fill='%234A4642' width='400' height='500'/%3E%3Cg stroke='%231A1A1A' stroke-width='1.5' opacity='0.7'%3E%3Cellipse cx='25' cy='30' rx='22' ry='18' fill='%236E6660'/%3E%3Cellipse cx='80' cy='35' rx='28' ry='20' fill='%23574F46'/%3E%3Cellipse cx='150' cy='28' rx='25' ry='22' fill='%237D7468'/%3E%3Cellipse cx='215' cy='35' rx='30' ry='18' fill='%234A413A'/%3E%3Cellipse cx='285' cy='30' rx='25' ry='22' fill='%23665C50'/%3E%3Cellipse cx='350' cy='35' rx='30' ry='20' fill='%23574F46'/%3E%3Cellipse cx='30' cy='80' rx='28' ry='18' fill='%2378706B'/%3E%3Cellipse cx='95' cy='85' rx='25' ry='22' fill='%23574F46'/%3E%3Cellipse cx='165' cy='80' rx='30' ry='20' fill='%23665C50'/%3E%3Cellipse cx='230' cy='85' rx='22' ry='20' fill='%23857B70'/%3E%3Cellipse cx='290' cy='80' rx='28' ry='22' fill='%234E4640'/%3E%3Cellipse cx='360' cy='85' rx='25' ry='18' fill='%236E6660'/%3E%3Cellipse cx='25' cy='130' rx='25' ry='20' fill='%23574F46'/%3E%3Cellipse cx='90' cy='135' rx='30' ry='22' fill='%237D7468'/%3E%3Cellipse cx='155' cy='130' rx='22' ry='20' fill='%234A413A'/%3E%3Cellipse cx='220' cy='135' rx='28' ry='18' fill='%23665C50'/%3E%3Cellipse cx='285' cy='130' rx='25' ry='22' fill='%23857B70'/%3E%3Cellipse cx='355' cy='135' rx='28' ry='20' fill='%23574F46'/%3E%3Cellipse cx='30' cy='180' rx='28' ry='22' fill='%23665C50'/%3E%3Cellipse cx='95' cy='185' rx='22' ry='18' fill='%2378706B'/%3E%3Cellipse cx='160' cy='180' rx='30' ry='20' fill='%234E4640'/%3E%3Cellipse cx='225' cy='185' rx='25' ry='22' fill='%23857B70'/%3E%3Cellipse cx='290' cy='180' rx='28' ry='18' fill='%23574F46'/%3E%3Cellipse cx='355' cy='185' rx='22' ry='20' fill='%236E6660'/%3E%3Cellipse cx='25' cy='230' rx='25' ry='22' fill='%237D7468'/%3E%3Cellipse cx='90' cy='235' rx='28' ry='18' fill='%23574F46'/%3E%3Cellipse cx='160' cy='230' rx='30' ry='22' fill='%23665C50'/%3E%3Cellipse cx='225' cy='235' rx='25' ry='20' fill='%234E4640'/%3E%3Cellipse cx='290' cy='230' rx='22' ry='22' fill='%23857B70'/%3E%3Cellipse cx='355' cy='235' rx='28' ry='18' fill='%2378706B'/%3E%3Cellipse cx='30' cy='280' rx='22' ry='20' fill='%234E4640'/%3E%3Cellipse cx='95' cy='285' rx='30' ry='22' fill='%23665C50'/%3E%3Cellipse cx='160' cy='280' rx='25' ry='18' fill='%23574F46'/%3E%3Cellipse cx='225' cy='285' rx='28' ry='20' fill='%237D7468'/%3E%3Cellipse cx='290' cy='280' rx='25' ry='22' fill='%234A413A'/%3E%3Cellipse cx='355' cy='285' rx='30' ry='18' fill='%23665C50'/%3E%3Cellipse cx='25' cy='335' rx='25' ry='22' fill='%23857B70'/%3E%3Cellipse cx='90' cy='330' rx='30' ry='18' fill='%23574F46'/%3E%3Cellipse cx='160' cy='335' rx='28' ry='22' fill='%23665C50'/%3E%3Cellipse cx='225' cy='330' rx='22' ry='20' fill='%234E4640'/%3E%3Cellipse cx='290' cy='335' rx='28' ry='22' fill='%237D7468'/%3E%3Cellipse cx='355' cy='330' rx='25' ry='18' fill='%2378706B'/%3E%3Cellipse cx='30' cy='385' rx='30' ry='20' fill='%23574F46'/%3E%3Cellipse cx='95' cy='380' rx='28' ry='22' fill='%23857B70'/%3E%3Cellipse cx='160' cy='385' rx='22' ry='18' fill='%234A413A'/%3E%3Cellipse cx='225' cy='380' rx='30' ry='22' fill='%23665C50'/%3E%3Cellipse cx='290' cy='385' rx='25' ry='20' fill='%234E4640'/%3E%3Cellipse cx='355' cy='380' rx='28' ry='22' fill='%237D7468'/%3E%3Cellipse cx='30' cy='435' rx='25' ry='18' fill='%23665C50'/%3E%3Cellipse cx='95' cy='440' rx='28' ry='22' fill='%23574F46'/%3E%3Cellipse cx='160' cy='435' rx='30' ry='20' fill='%23857B70'/%3E%3Cellipse cx='225' cy='440' rx='22' ry='22' fill='%234A413A'/%3E%3Cellipse cx='290' cy='435' rx='28' ry='18' fill='%2378706B'/%3E%3Cellipse cx='355' cy='440' rx='25' ry='22' fill='%23574F46'/%3E%3Cellipse cx='30' cy='485' rx='28' ry='15' fill='%23665C50'/%3E%3Cellipse cx='100' cy='485' rx='32' ry='15' fill='%234E4640'/%3E%3Cellipse cx='175' cy='485' rx='30' ry='15' fill='%237D7468'/%3E%3Cellipse cx='245' cy='485' rx='28' ry='15' fill='%23574F46'/%3E%3Cellipse cx='315' cy='485' rx='30' ry='15' fill='%23857B70'/%3E%3Cellipse cx='380' cy='485' rx='25' ry='15' fill='%23665C50'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; background-position: center; }
.portfolio-item-img-inner.mat-veneer { background: linear-gradient(135deg, rgba(0,0,0,0.25), rgba(0,0,0,0.05)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Crect fill='%238B7960' width='400' height='500'/%3E%3Cg opacity='0.6'%3E%3Cpath d='M0,15 L80,8 L100,40 L60,55 L0,50 Z' fill='%23A89578'/%3E%3Cpath d='M105,5 L200,12 L195,45 L110,42 Z' fill='%23756450'/%3E%3Cpath d='M205,8 L300,5 L320,40 L210,48 Z' fill='%2395836A'/%3E%3Cpath d='M325,10 L400,15 L400,55 L330,50 Z' fill='%237B6A56'/%3E%3Cpath d='M0,55 L80,55 L75,98 L20,100 L0,90 Z' fill='%2378674F'/%3E%3Cpath d='M85,55 L180,52 L185,95 L80,100 Z' fill='%2398866C'/%3E%3Cpath d='M190,52 L285,55 L290,98 L195,95 Z' fill='%23695A48'/%3E%3Cpath d='M295,55 L385,52 L400,90 L300,100 Z' fill='%23A08D72'/%3E%3Cpath d='M0,105 L100,100 L95,150 L0,150 Z' fill='%23968370'/%3E%3Cpath d='M105,100 L210,105 L215,148 L100,152 Z' fill='%236F5E4A'/%3E%3Cpath d='M220,105 L310,100 L320,150 L215,148 Z' fill='%23A28F72'/%3E%3Cpath d='M325,100 L400,105 L400,148 L320,150 Z' fill='%23766550'/%3E%3Cpath d='M0,155 L120,150 L115,200 L0,205 Z' fill='%2380705A'/%3E%3Cpath d='M125,150 L230,155 L240,200 L120,200 Z' fill='%23A28F72'/%3E%3Cpath d='M245,155 L355,150 L350,200 L240,200 Z' fill='%23685B47'/%3E%3Cpath d='M360,150 L400,155 L400,200 L355,200 Z' fill='%2398866C'/%3E%3Cpath d='M0,210 L90,205 L95,260 L0,265 Z' fill='%23A89578'/%3E%3Cpath d='M100,205 L210,210 L215,255 L95,260 Z' fill='%23685B47'/%3E%3Cpath d='M220,210 L320,205 L325,260 L215,255 Z' fill='%23968370'/%3E%3Cpath d='M330,205 L400,210 L400,255 L325,260 Z' fill='%23766550'/%3E%3Cpath d='M0,270 L100,265 L105,310 L0,315 Z' fill='%23685B47'/%3E%3Cpath d='M110,265 L240,270 L235,310 L105,315 Z' fill='%23A28F72'/%3E%3Cpath d='M245,270 L380,265 L375,310 L235,310 Z' fill='%23695A48'/%3E%3Cpath d='M385,265 L400,270 L400,310 L375,310 Z' fill='%2398866C'/%3E%3Cpath d='M0,320 L90,315 L100,365 L0,370 Z' fill='%23968370'/%3E%3Cpath d='M105,315 L220,320 L215,365 L100,365 Z' fill='%23685B47'/%3E%3Cpath d='M225,320 L330,315 L335,365 L215,365 Z' fill='%23A28F72'/%3E%3Cpath d='M340,315 L400,320 L400,365 L335,365 Z' fill='%23766550'/%3E%3Cpath d='M0,375 L120,370 L115,420 L0,425 Z' fill='%2380705A'/%3E%3Cpath d='M125,370 L240,375 L235,420 L115,420 Z' fill='%23A28F72'/%3E%3Cpath d='M245,375 L355,370 L350,420 L235,420 Z' fill='%23685B47'/%3E%3Cpath d='M360,370 L400,375 L400,420 L350,420 Z' fill='%2398866C'/%3E%3Cpath d='M0,430 L90,425 L100,475 L0,480 Z' fill='%23A89578'/%3E%3Cpath d='M105,425 L220,430 L215,475 L100,475 Z' fill='%23685B47'/%3E%3Cpath d='M225,430 L330,425 L335,475 L215,475 Z' fill='%23968370'/%3E%3Cpath d='M340,425 L400,430 L400,475 L335,475 Z' fill='%23766550'/%3E%3Cpath d='M0,485 L100,480 L105,500 L0,500 Z' fill='%23685B47'/%3E%3Cpath d='M110,480 L240,485 L240,500 L100,500 Z' fill='%23A28F72'/%3E%3Cpath d='M245,485 L380,480 L380,500 L240,500 Z' fill='%23695A48'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; background-position: center; }
.portfolio-item-img-inner {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.portfolio-item:hover .portfolio-item-img-inner { transform: scale(1.05); }
.portfolio-item-img::before {
  content: 'IMG';
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--parchment);
  opacity: 0.6;
}
.portfolio-item-img::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  transition: border-color 0.3s ease;
  pointer-events: none;
}
.portfolio-item:hover .portfolio-item-img::after {
  border-color: var(--parchment);
}

.portfolio-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.portfolio-item-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.portfolio-item-title em { font-style: italic; color: var(--slate-blue-dark); }
.portfolio-item-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--slate-blue-dark);
  white-space: nowrap;
}
.portfolio-item-loc {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--charcoal);
  margin-top: 0.4rem;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .portfolio-hero { padding: 7rem 1.5rem 3rem; }
  .portfolio-hero-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .portfolio-hero-meta { text-align: left; }
  .portfolio-grid { padding: 3rem 1.5rem 6rem; }
  .portfolio-grid-inner { grid-template-columns: 1fr; gap: 3rem; }
  .portfolio-item.size-lg, .portfolio-item.size-md,
  .portfolio-item.size-sm, .portfolio-item.size-wide { grid-column: span 1; }
  .portfolio-item.offset-1, .portfolio-item.offset-2 { margin-top: 0; }
}

/* ============================================
   CONTACT PAGE — like writing a letter
   ============================================ */
.contact-page {
  min-height: 100vh;
  background: var(--parchment);
  padding: 12rem var(--margin-x) 6rem;
}
.contact-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
}
.contact-side h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 2rem;
}
.contact-side h1 em { font-style: italic; color: var(--slate-blue-dark); }
.contact-side .body-md { color: var(--charcoal); margin-bottom: 3rem; max-width: 380px; }

.contact-direct {
  border-top: 1px solid var(--ink);
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.contact-direct-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: baseline;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--stone-light);
}
.contact-direct-row:last-child { border-bottom: none; padding-bottom: 0; }
.contact-direct-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--slate-blue-dark);
}
.contact-direct-value {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
}
.contact-direct-value:hover { color: var(--slate-blue-dark); }

/* Letter-style form */
.letter {
  background: var(--bone);
  padding: 4rem;
  position: relative;
  box-shadow: 0 30px 60px -30px rgba(58, 71, 90, 0.3);
}
.letter::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 1px solid var(--ink);
  pointer-events: none;
}
.letter-header {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--slate-blue-dark);
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
}
.letter-greeting {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin-bottom: 2.5rem;
  color: var(--ink);
}
.letter-greeting em { color: var(--slate-blue-dark); }

.letter-line {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 0.5rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  display: inline;
}
.letter-line label {
  display: inline;
  margin-right: 0.5rem;
}
.letter-input {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--slate-blue-dark);
  color: var(--ink);
  padding: 0.2rem 0.5rem;
  min-width: 200px;
  outline: none;
  transition: border-color 0.3s ease;
  font-variation-settings: "opsz" 144;
}
.letter-input:focus { border-color: var(--ink); }
.letter-input.short { min-width: 120px; }
.letter-input.long { width: 100%; min-width: 0; display: block; margin-top: 0.4rem; }

.letter-paragraph {
  margin: 1.5rem 0;
  line-height: 1.9;
}

.letter-textarea {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.6;
  background: transparent;
  border: 1px solid var(--stone-light);
  color: var(--ink);
  padding: 1rem;
  width: 100%;
  min-height: 120px;
  resize: vertical;
  outline: none;
  transition: border-color 0.3s ease;
  margin-top: 1rem;
}
.letter-textarea:focus { border-color: var(--ink); }

.letter-signoff {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px dashed var(--stone-light);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
}
.letter-signoff-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.1rem;
  color: var(--charcoal);
  letter-spacing: -0.01em;
}
.letter-submit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 1rem 2rem;
  cursor: none;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  transition: background 0.3s ease, color 0.3s ease, gap 0.3s ease;
}
.letter-submit::after {
  content: '→';
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
}
.letter-submit:hover { background: var(--slate-blue-dark); border-color: var(--slate-blue-dark); gap: 1.5rem; }

@media (max-width: 900px) {
  .contact-page { padding: 7rem 1.5rem 4rem; }
  .contact-inner { grid-template-columns: 1fr; gap: 3rem; }
  .letter { padding: 2rem; }
  .letter-line { display: block; margin-bottom: 1rem; }
  .letter-input { width: 100%; min-width: 0; }
}

/* ============================================
   FOOTER
   ============================================ */
footer {
  background: var(--ink);
  color: var(--parchment);
  padding: 6rem var(--margin-x) 2rem;
  position: relative;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.footer-mark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--parchment);
  margin-bottom: 4rem;
  font-variation-settings: "opsz" 144;
}
.footer-mark em { font-style: italic; color: var(--parchment-warm); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(232, 225, 211, 0.3);
  margin-bottom: 4rem;
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--parchment-warm);
  margin-bottom: 1.5rem;
}
.footer-col p, .footer-col a {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--parchment);
  text-decoration: none;
  letter-spacing: -0.005em;
  display: block;
  margin-bottom: 0.5rem;
}
.footer-col a:hover { color: var(--parchment-warm); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--parchment-warm);
}
@media (max-width: 900px) {
  footer { padding: 4rem 1.5rem 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}

/* ============================================
   SCROLL REVEAL
   ============================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }

/* For static logo svg references */
.logo-svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}