/* Pillar page styles — shared */
.pillar-body { background: var(--sand-100); }

.pillar-nav .nav-links a.pillar-active { color: var(--pillar-accent); }

/* Hero */
.phero {
  position: relative;
  /* Let content drive the height — was min-height:88vh which forced
     200-300px of empty cream space below the photo before the next
     section started. Photo at 4:5 already gives the hero presence. */
  padding: 120px 40px 60px;
  display: grid;
  /* Right column slightly wider so the NIRC photo has real presence
     instead of feeling cramped at 50/50. */
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  /* Align the breadcrumb + mark + title to the top of the hero
     instead of centering, so the content sits right under the nav
     rather than floating in the middle. */
  align-items: start;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 80% 30%, var(--pillar-wash), transparent 60%),
    var(--sand-100);
}
/* When no .phero-right panel, lay phero-left out as an asymmetric grid:
   row 1 = mark + kicker, row 2 = big stacked title (left) + italic sub
   (right), row 3 = meta KVs spanning full width. */
.phero:not(:has(.phero-right)) { grid-template-columns: 1fr; padding: 100px 40px 70px; }
.phero:not(:has(.phero-right)) .phero-left {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  column-gap: 100px;
  row-gap: 56px;
  grid-template-areas:
    "crumbs crumbs"
    "head   ."
    "title  sub"
    "meta   meta";
  align-items: start;
}
.phero:not(:has(.phero-right)) .phero-crumbs { grid-area: crumbs; margin-bottom: 0; }
.phero:not(:has(.phero-right)) .phero-head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 0;
}
.phero:not(:has(.phero-right)) .phero-head .phero-mark { margin-bottom: 0; }
.phero:not(:has(.phero-right)) .phero-head .phero-kicker {
  margin-bottom: 0;
  padding-top: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  letter-spacing: 0.4em;
  font-weight: 500;
  color: var(--pillar-accent);
}
.phero:not(:has(.phero-right)) .phero-head .phero-kicker::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pillar-accent);
}
.phero:not(:has(.phero-right)) .phero-title {
  grid-area: title;
  font-size: clamp(72px, 9vw, 156px);
  margin: 0;
}
.phero:not(:has(.phero-right)) .phero-title em { color: inherit; }
.phero:not(:has(.phero-right)) .phero-sub {
  grid-area: sub;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.4;
  max-width: 42ch;
  margin: 0;
  align-self: center;
}
.phero:not(:has(.phero-right)) .phero-meta {
  grid-area: meta;
  max-width: none;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
}
@media (max-width: 920px) {
  .phero:not(:has(.phero-right)) .phero-left {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 32px;
    grid-template-areas:
      "crumbs"
      "head"
      "title"
      "sub"
      "meta";
  }
}
.phero-left { position: relative; z-index: 2; max-width: 620px; }
.phero-crumbs {
  display: flex; gap: 10px; align-items: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 44px;
}
.phero-crumbs span { color: var(--ink-500); }

.phero-mark {
  width: 96px; height: 96px;
  border: 1px solid var(--pillar-accent);
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 28px;
  font-family: var(--serif);
  font-size: 48px;
  color: var(--pillar-accent);
  animation: floatY 8s ease-in-out infinite;
}
.phero-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--pillar-accent);
  margin-bottom: 14px;
}
.phero-title {
  font-family: var(--serif);
  font-weight: 300;
  /* Sized so the longest word ("Integrated") fits inside the 50%
     hero column at viewports down to ~1100px. Was 9vw / 144px max
     which overflowed and shrank the photo column to a sliver. */
  font-size: clamp(56px, 6.6vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--ink-900);
}
.phero-title em { font-style: italic; color: var(--pillar-accent); font-weight: 300; }
.phero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink-700);
  margin: 20px 0 40px;
  max-width: 36ch;
  line-height: 1.45;
}

.phero-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 480px;
  padding-top: 28px;
  border-top: 1px solid var(--sand-300);
}
.phero-meta .kv .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-500);
  margin-bottom: 6px;
}
.phero-meta .kv .v {
  font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ink-900); line-height: 1.2;
}

/* Right: abstract texture panel */
.phero-right {
  position: relative;
  aspect-ratio: 4/5;
  max-height: 72vh;
  background: var(--pillar-wash);
  border-radius: 4px;
  overflow: hidden;
  z-index: 2;
}
.phero-right::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(var(--texture-angle, 45deg), rgba(26,26,26,0.05) 0 1px, transparent 1px 12px),
    radial-gradient(400px 300px at 30% 30%, color-mix(in oklab, var(--pillar-accent), transparent 85%), transparent 60%);
}
.phero-right::after {
  content: attr(data-caption);
  position: absolute;
  bottom: 18px; left: 20px; right: 20px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.phero-right .big-a {
  position: absolute;
  right: 8%; top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: clamp(200px, 28vw, 440px);
  font-weight: 300;
  color: color-mix(in oklab, var(--pillar-accent), transparent 65%);
  line-height: 1;
  user-select: none;
}

/* Editorial photo card variant of the hero right panel — a small
   portrait photograph paired with a vertical caption block. Replaces
   the textured swatch when used. The card is intentionally smaller
   than the full right column so the empty space + floating dots
   continue to breathe around it (the rest of the site uses asymmetric
   breathing, not full-bleed panels). */
.phero-right.photo-card {
  /* Override the textured panel defaults — just an image, no card chrome */
  background: transparent;
  border-radius: 0;
  aspect-ratio: auto;
  max-height: none;
  overflow: visible;
  align-self: stretch;
  width: 100%;
  display: block;
}
.phero-right.photo-card::before,
.phero-right.photo-card::after { display: none; }

.nirc-photo {
  position: relative;
  /* Roughly square so the photo height matches the left column's
     content height (title + sub + meta). Portrait 4:5 left a big
     empty pocket on the left. */
  aspect-ratio: 1 / 1;
  margin: 0;
  width: 100%;
  background: transparent;
  /* Soft feathered edges — wide radial mask so the photo dissolves
     gradually into the sand background. Only the inner ~25% stays at
     full opacity; the fade carries all the way to ~95%, producing a
     diffused, ghost-print look (rather than a hard-edged rectangle). */
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 22%, rgba(0,0,0,0.6) 55%, transparent 95%);
          mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 22%, rgba(0,0,0,0.6) 55%, transparent 95%);
}
.nirc-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Slight desaturation + softness so it sits in the cream UI */
  filter: saturate(0.7) contrast(0.96) brightness(1.02);
  display: block;
}
/* Vivid variant — full color, no desaturation. Use on a photo whose
   detail or warmth needs to come through unmuted (e.g. living spaces
   where color is the point). Feathered edges stay the same. */
.photo-card-vivid .nirc-photo img {
  filter: contrast(1.02) brightness(1.01);
}

.nirc-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 32px;
  row-gap: 14px;
  align-items: start;
  border-top: 1px solid var(--sand-300);
  padding-top: 18px;
}
.nirc-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--pillar-accent);
  grid-column: 1 / -1;
}
.nirc-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  font-style: italic;
  color: var(--ink-900);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0;
  grid-column: 1;
  align-self: end;
}
.nirc-divider { display: none; }
.nirc-detail-list {
  margin: 0;
  display: grid;
  gap: 6px;
  font-family: var(--mono);
  grid-column: 2;
  justify-self: end;
  text-align: right;
}
.nirc-detail-list > div {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 14px;
  align-items: baseline;
  justify-content: end;
}
.nirc-detail-list dt {
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0;
}
.nirc-detail-list dd {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-700);
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
}

/* Services grid */
.psection {
  padding: 80px 40px 90px;
  position: relative;
}
.psection-inner { max-width: clamp(1280px, 80vw, 1500px); margin: 0 auto; }
.psection h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.05;
  margin: 18px 0 0;
  max-width: 20ch;
}
.psection h2 em { font-style: italic; color: inherit; }

.psection-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;
  margin-bottom: 80px;
}
.psection-head p {
  font-family: var(--serif); font-size: 18px; line-height: 1.7; color: var(--ink-700); margin: 0; max-width: 46ch;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 1fr;
  gap: 1px;
  background: var(--sand-300);
  border: 1px solid var(--sand-300);
  border-radius: 2px;
  overflow: hidden;
}
.service {
  grid-column: span 4;
  background: var(--sand-50);
  padding: 40px 32px 36px;
  position: relative;
  min-height: 240px;
  display: flex; flex-direction: column;
  transition: background 400ms;
}
.service:hover { background: var(--pillar-wash); }
.service .idx {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; color: var(--pillar-accent);
  margin-bottom: 16px;
}
.service h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 12px;
  max-width: 20ch;
  min-height: calc(2 * 28px * 1.15);
}
.service p {
  font-size: 14.5px; line-height: 1.7; color: var(--ink-500); margin: 0;
}
.service .tag {
  margin-top: auto; padding-top: 20px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-400);
}

/* Approach (three big statements) */
.approach {
  background: var(--sand-50);
  border-top: 1px solid var(--sand-300);
  border-bottom: 1px solid var(--sand-300);
}
.approach-list { display: grid; gap: 2px; background: var(--sand-300); }
.approach-item {
  background: var(--sand-50);
  padding: 44px 40px;
  display: grid;
  grid-template-columns: 80px 1fr 2fr;
  gap: 40px;
  align-items: baseline;
}
.approach-item .idx {
  font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--ink-500); font-weight: 300;
}
.approach-item h3 {
  font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 1.05; margin: 0;
  letter-spacing: -0.01em;
}
.approach-item p {
  font-size: 15.5px; line-height: 1.75; color: var(--ink-700); margin: 0; max-width: 54ch;
}

/* Pullquote */
.pullquote {
  padding: 100px 40px;
  text-align: center;
  position: relative;
}
.pullquote blockquote {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.25;
  max-width: 24ch;
  margin: 0 auto;
  color: var(--ink-900);
}
.pullquote cite {
  display: block;
  margin-top: 40px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-500);
  font-style: normal;
}

/* Next pillar band */
.next-pillar {
  padding: 80px 40px;
  background: var(--sand-100);
  border-top: 1px solid var(--sand-300);
}
.next-pillar-inner {
  max-width: clamp(1280px, 80vw, 1500px); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch;
}
.next-card {
  background: var(--sand-50);
  border: 1px solid var(--sand-300);
  padding: 50px 40px;
  border-radius: 4px;
  text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1), box-shadow 600ms;
  min-height: 260px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.next-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(26,26,26,0.15); }
.next-card .kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 14px; }
.next-card .kicker em { font-style: normal; color: var(--nc-accent); }
.next-card h3 {
  font-family: var(--serif); font-weight: 300; font-size: 48px; line-height: 1; margin: 0; color: var(--ink-900);
}
.next-card h3 em { font-style: italic; color: var(--nc-accent); font-weight: 300; }
.next-card .cta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--nc-accent);
  display: flex; justify-content: space-between;
}

/* iPad landscape (≤1100px) — small laptop too. Hero already responsive
   via clamp/vw on title font, just tighten the gutter so the 60px gap
   between hero columns doesn't dominate the layout. */
@media (max-width: 1100px) {
  .phero { gap: 40px; padding: 110px 32px 70px; }
  .service { padding: 32px 26px 30px; min-height: 220px; }
  .service h3 { font-size: 26px; }
  .approach-item { padding: 50px 32px; gap: 32px; }
  .approach-item h3 { font-size: 36px; }
  .pullquote { padding: 120px 32px; }
  .next-pillar { padding: 100px 32px; }
  .next-card h3 { font-size: 42px; }
}

/* iPad portrait (≤900px) — hero collapses to 1-col (no right panel),
   services switch from 3-col (span 4) to 2-col (span 6). Approach items
   stay multi-col since they read as wide statements. Top padding sized
   to clear the 2-row mobile nav (brand row + 5-link grid row). */
@media (max-width: 900px) {
  .phero {
    grid-template-columns: 1fr;
    padding: 150px 28px 60px;
    min-height: auto;
  }
  /* Decorative texture panel still hides on mobile — but the photo
     card variant stays visible, photo collapses to a 16:10 band with
     feathered edges so the NIRC building appears before services. */
  .phero-right { display: none; }
  .phero-right.photo-card {
    display: block;
    margin-top: 20px;
  }
  .phero-right.photo-card .nirc-photo {
    aspect-ratio: 16 / 10;
  }
  .phero-title { font-size: clamp(48px, 8vw, 88px); }
  .phero-sub { font-size: 17px; }
  .psection-head { grid-template-columns: 1fr; gap: 16px; }
  .service { grid-column: span 6; padding: 28px 22px 26px; min-height: 200px; }
  .service h3 { font-size: 24px; }
  .approach-item { grid-template-columns: 60px 1fr; gap: 24px; padding: 44px 26px; }
  .approach-item p { grid-column: 1 / -1; margin-top: -8px; }
  .approach-item h3 { font-size: 30px; }
  .pullquote { padding: 80px 24px; }
  .pullquote blockquote { font-size: clamp(26px, 4vw, 40px); }
  .next-pillar { padding: 72px 24px; }
  .next-pillar-inner { grid-template-columns: 1fr; gap: 16px; }
  .next-card { padding: 36px 28px; min-height: 200px; }
  .next-card h3 { font-size: 34px; }
}

/* Phone (≤500px) — everything collapses to single column, big serif
   headings step down a tier, vertical paddings halve since each
   section is essentially full-width strips. Top padding accounts for
   the taller mobile nav (brand row + 3×2 link grid). */
@media (max-width: 500px) {
  .phero {
    padding: 150px 18px 48px;
    gap: 24px;
  }
  .phero-crumbs { font-size: 9px; letter-spacing: 0.22em; margin-bottom: 28px; gap: 8px; }
  .phero-mark { width: 72px; height: 72px; font-size: 38px; margin-bottom: 22px; }
  .phero-kicker { font-size: 10px; letter-spacing: 0.24em; }
  .phero-title { font-size: clamp(38px, 11vw, 58px); }
  .phero-sub { font-size: 16px; line-height: 1.6; }
  .phero-meta { grid-template-columns: 1fr; gap: 16px; padding-top: 20px; }
  .phero-meta .kv .v { font-size: 18px; }

  .services-grid { grid-template-columns: 1fr; }
  .service { grid-column: 1; padding: 26px 20px 24px; min-height: 0; }
  .service h3 { font-size: 22px; }
  .service p { font-size: 14px; }

  .approach-item { grid-template-columns: 1fr; gap: 14px; padding: 36px 20px; }
  .approach-item .idx { font-size: 22px; }
  .approach-item h3 { font-size: 26px; }
  .approach-item p { font-size: 14.5px; margin-top: 0; }

  .pullquote { padding: 60px 20px; }
  .pullquote blockquote { font-size: clamp(22px, 6.5vw, 32px); line-height: 1.3; }
  .pullquote cite { font-size: 9.5px; margin-top: 28px; }

  .next-pillar { padding: 52px 18px; }
  .next-card { padding: 28px 22px; min-height: 0; }
  .next-card h3 { font-size: 28px; }
  .next-card .kicker { font-size: 9px; letter-spacing: 0.22em; }
}