/* ============================================================================
   06 — Premium Clean
   Image first, words second. A light serif at generous tracking, long thin
   rules, brass used only for small caps. The opening plate overlaps the
   image rather than sitting on it, which is what keeps the text legible.
   ========================================================================= */

body.design-06 {
  --ink:        #1c1a17;
  --paper:      #eeebe5;
  --plate:      #f7f5f1;
  --line:       #cfc9bd;
  --muted:      #4d4941;
  --accent-ink: #6f5730;   /* text-safe on plate: 5.9:1 */

  background: var(--paper);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.7;
}

.design-06 h1,
.design-06 h2,
.design-06 h3 {
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.design-06 .p-wrap { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }

.design-06 .p-kicker {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.design-06 .p-kicker--centre { text-align: center; }

.design-06 .p-link {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}

.design-06 .p-link:hover { border-bottom-color: var(--ink); }

/* --- Header -------------------------------------------------------------- */

.design-06 .p-head {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  padding: 26px 0;
}

.design-06 .p-head__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  align-items: center;
  justify-content: space-between;
}

.design-06 .p-logo {
  font-size: 0.86rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}

.design-06 .p-nav { display: flex; flex-wrap: wrap; gap: 6px 30px; }

.design-06 .p-nav a {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}

.design-06 .p-nav a:hover { color: var(--accent-ink); }

/* --- Opening ------------------------------------------------------------- */

.design-06 .p-open { position: relative; padding-bottom: clamp(40px, 6vw, 80px); }

.design-06 .p-open__image { position: relative; }

.design-06 .p-open__image::after {
  /* Keeps the header legible over the top of the photograph. */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 160px;
  background: linear-gradient(rgba(247, 245, 241, 0.92), rgba(247, 245, 241, 0));
}

.design-06 .p-open__image img {
  display: block;
  width: 100%;
  height: clamp(420px, 74vh, 760px);
  object-fit: cover;
}

.design-06 .p-plate {
  max-width: 640px;
  margin-top: clamp(-140px, -9vw, -60px);
  position: relative;
  z-index: 2;
  padding: clamp(30px, 4vw, 52px);
  background: var(--plate);
}

.design-06 .p-plate h1 {
  margin: 20px 0 18px;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
}

.design-06 .p-plate__lede { margin-bottom: 28px; color: var(--muted); font-size: 1rem; }

/* --- Service ------------------------------------------------------------- */

.design-06 .p-service { padding: clamp(64px, 10vw, 128px) 0; }

.design-06 .p-statement {
  max-width: 24ch;
  margin: 26px auto clamp(52px, 7vw, 88px);
  font-size: clamp(1.7rem, 4vw, 3.1rem);
  line-height: 1.24;
  text-align: center;
}

.design-06 .p-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}

.design-06 .p-columns article { padding: 30px 26px 0; }
.design-06 .p-columns article + article { border-left: 1px solid var(--line); }

.design-06 .p-columns h3 {
  margin-bottom: 12px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.design-06 .p-columns p { color: var(--muted); font-size: 0.96rem; }

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

.design-06 .p-work { padding-bottom: clamp(60px, 9vw, 110px); }

.design-06 .p-work__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(28px, 4vw, 48px);
}

.design-06 .p-work__note { max-width: 44ch; color: var(--muted); font-size: 0.98rem; }

.design-06 .p-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

.design-06 .p-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.design-06 .p-gallery figcaption {
  padding: 18px clamp(16px, 2vw, 28px) 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.design-06 .p-gallery figcaption span {
  display: block;
  margin-bottom: 6px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

/* --- Standards ----------------------------------------------------------- */

.design-06 .p-standards { padding: clamp(50px, 7vw, 90px) 0; }

.design-06 .p-standards__inner {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px 48px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.design-06 .p-standards li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}

/* --- Quote --------------------------------------------------------------- */

.design-06 .p-quote { padding: clamp(50px, 8vw, 100px) 0; }

.design-06 .p-quote figure { max-width: 30ch; margin-inline: auto; text-align: center; }

.design-06 .p-quote blockquote p {
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  line-height: 1.34;
}

.design-06 .p-quote blockquote p::before { content: "\201C"; }
.design-06 .p-quote blockquote p::after { content: "\201D"; }

.design-06 .p-quote figcaption {
  margin-top: 26px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.design-06 .p-contact { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--line); }

.design-06 .p-contact h2 { margin-top: 16px; max-width: 14ch; font-size: clamp(1.7rem, 3.4vw, 2.6rem); }

.design-06 .p-contact dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 30px;
  margin: clamp(34px, 5vw, 56px) 0 36px;
}

.design-06 .p-contact dt {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.design-06 .p-contact dd { margin-top: 10px; font-size: 1.02rem; }
.design-06 .p-contact dd a { text-decoration: none; border-bottom: 1px solid var(--line); }
.design-06 .p-contact dd a:hover { border-bottom-color: var(--ink); }

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

.design-06 .p-foot { padding: 24px 0 40px; border-top: 1px solid var(--line); }

.design-06 .p-foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 30px;
  justify-content: space-between;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Mark ---------------------------------------------------------------- */

.design-06 .p-logo { display: inline-flex; align-items: center; gap: 12px; }
.design-06 .p-mark { width: 24px; height: 24px; flex: none; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 940px) {
  .design-06 .p-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .design-06 .p-columns article:nth-child(3) { border-left: 0; }
  .design-06 .p-columns article:nth-child(n+3) { border-top: 1px solid var(--line); }
  .design-06 .p-gallery { grid-template-columns: 1fr; gap: 34px; }
  .design-06 .p-gallery img { aspect-ratio: 4 / 3; }
  .design-06 .p-standards__inner { grid-template-columns: 1fr; }
  .design-06 .p-contact dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  body.design-06 { font-size: 16px; }
  .design-06 .p-wrap { width: min(100% - 32px, 1240px); }
  .design-06 .p-head { position: static; padding: 18px 0; }
  .design-06 .p-open__image::after { display: none; }
  .design-06 .p-open__image img { height: 320px; }
  .design-06 .p-plate { margin-top: -40px; padding: 26px 22px; }
  .design-06 .p-columns { grid-template-columns: 1fr; }
  .design-06 .p-columns article { border-left: 0; padding-inline: 0; }
  .design-06 .p-columns article + article { border-top: 1px solid var(--line); }
  .design-06 .p-contact dl { grid-template-columns: 1fr; }
}