/* =========================================================================
   INTEGRITY DEVELOPMENT PARTNERS
   =========================================================================

   A deliberately different visual system from integrity1auto.com.

   The consumer site is built on #E13845, 20px rounded cards, soft shadows and
   a heavy display face — correct for selling an oil change, wrong for a
   development portfolio read by brokers, lenders and municipalities. So this
   stylesheet shares almost nothing with it except the family relationship:

     - Architectural palette. Charcoal, concrete, stone, steel. Integrity red
       (#C8102E, the brand red named in the IDP brief) appears as an accent
       only: status marks, rules, the current timeline stage, one button. It is
       never a background wash.
     - Square corners. Nothing is rounded except the submit button's 2px, which
       exists only to stop it reading as a system control.
     - Hairlines instead of shadows. Structure is drawn with 1px rules at low
       opacity, the way a drawing sheet is.
     - Type: Inter, which the site already loads, at display sizes with tight
       negative tracking — institutional rather than promotional. Metadata,
       eyebrows and numbers are set in the system monospace, which is what
       gives the page its drawing-sheet register without loading a font.
     - Photography is large and uncropped-looking; copy is set to a narrow
       measure beside it.

   SCOPING. Every rule is prefixed .idp-body or .idp-*. This stylesheet is
   enqueued only on IDP pages (see functions.php), and IDP pages render their
   own chrome, so nothing here can reach an existing page.
   ========================================================================= */

/* -------------------------------------------------------------------------
   TYPE — Inter, self-hosted.

   On www.integrity1auto.com Inter arrives via the Elementor kit, which requests
   every weight from 100 to 900 plus italics from Google Fonts. IDP runs on its
   own subdomain and its own install, where Elementor may not be present at all,
   so depending on that would leave the site in system-ui.

   This is the SIL OFL variable Inter (see assets/fonts/Inter-LICENSE.txt),
   subsetted to latin, latin-ext and the punctuation the copy actually uses —
   57 KB for the whole 100-900 range, against ~326 KB unsubsetted or three
   separate static weights over a third-party connection. One file, one request,
   no third party.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "InterIDP";
  src: url("../fonts/inter-var-latin.woff2") format("woff2-variations"),
       url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.idp-body {
  /* --- Palette ------------------------------------------------------- */
  --idp-ink:       #121416;   /* near-black, slightly cool            */
  --idp-black:     #0A0B0C;
  --idp-graphite:  #2E3338;
  --idp-steel:     #63696F;   /* muted grey, body on light — 4.88:1 on stone, 5.55:1 on white */
  --idp-steel-lt:  #9AA1A7;   /* muted grey, body on dark            */
  --idp-concrete:  #E4E1DC;   /* warm stone                          */
  --idp-stone:     #F2F0EC;   /* warm white ground                   */
  --idp-white:     #FFFFFF;

  --idp-red:       #C8102E;   /* Integrity red — accent only          */

  /* --- Mark -----------------------------------------------------------
     The logo container is charcoal, not the Car Pros red. --idp-mark-bg is
     deliberately lighter than --idp-ink so the square still reads as a
     contained shape on the near-black header rather than dissolving into it. */
  --idp-mark-bg:   #363D44;
  --idp-mark-fg:   #FFFFFF;
  --idp-red-lt:    #E8415C;   /* the red, lifted for dark grounds     */

  --idp-line:      rgba(18, 20, 22, .14);
  --idp-line-soft: rgba(18, 20, 22, .08);
  --idp-line-dk:   rgba(255, 255, 255, .16);
  --idp-line-dks:  rgba(255, 255, 255, .08);

  /* --- Type ----------------------------------------------------------- */
  --idp-sans: "InterIDP", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --idp-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- Rhythm --------------------------------------------------------- */
  --idp-gut:   24px;                 /* page gutter, phone             */
  --idp-max:   1320px;
  --idp-sec:   clamp(72px, 9vw, 150px);  /* section padding block      */

  /* --- Motion --------------------------------------------------------- */
  --idp-ease:  cubic-bezier(.22, .61, .36, 1);
  --idp-dur:   .55s;

  background: var(--idp-white);
  color: var(--idp-ink);
  font-family: var(--idp-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
  overflow-x: hidden;
}

@media (min-width: 760px) { .idp-body { --idp-gut: 40px; } }
@media (min-width: 1200px) { .idp-body { --idp-gut: 56px; } }

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

.idp-body img, .idp-body svg, .idp-body video { max-width: 100%; display: block; }

/* Specificity note: :where() so this reset cannot out-specify a component's
   own link colour. As `.idp-body a` it was (0,1,1) and silently beat
   `.idp-btn--solid`, which rendered the solid button in its parent's text
   colour instead of white. */
:where(.idp-body) a { color: inherit; }

/* The parent theme (hello-elementor) ships `a:hover{color:#222}` and
   `a:hover{color:#336}` at (0,1,1), which out-specified every single-class
   component rule here — the solid CTA went dark-on-red at 1.5:1 on hover. This
   reset is (0,2,0) so it beats the parent, and it sits ABOVE the component
   rules so they still win on source order. Third specificity bug in this file;
   see the note on :where() above for the first two. */
.idp-body :where(a):hover,
.idp-body :where(a):focus,
.idp-body :where(a):active { color: inherit; }

/* The host theme sets its own focus styles; this one has to be visible on
   both the stone and the ink grounds, so it is drawn in the accent. */
.idp-body :focus-visible {
  outline: 2px solid var(--idp-red);
  outline-offset: 3px;
}
/* Anywhere the ground is dark, the ring is the lifted red. The header and the
   footer are NOT .idp-sec--dark, and were inheriting #C8102E — which is 2.55:1
   against the header ground, below the 3:1 that WCAG 2.4.11 requires of a focus
   indicator. Easy to miss: :focus-visible cannot be triggered programmatically,
   so a scripted audit measures the browser's default ring instead of this one. */
.idp-sec--dark :focus-visible,
.idp-hero__copy :focus-visible,
.idp-header :focus-visible,
.idp-footer :focus-visible,
.idp-phero :focus-visible,
.idp-lb :focus-visible { outline-color: var(--idp-red-lt); }

.idp-body .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.idp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--idp-ink); color: #fff; padding: 14px 20px;
  font: 600 14px/1 var(--idp-sans);
}
.idp-skip:focus { left: 8px; top: 8px; }

/* =========================================================================
   SHARED PRIMITIVES
   ========================================================================= */

.idp-wrap {
  width: 100%;
  max-width: var(--idp-max);
  margin-inline: auto;
  padding-inline: var(--idp-gut);
}

.idp-sec { padding-block: var(--idp-sec); position: relative; }

/*
 * Two dark sections in a row read as one very long band, and the second one's
 * heading looks like it belongs to the first. This became reachable when the
 * interior walkthrough moved above the gallery and landed directly under the
 * timeline. A hairline is the house way of separating two grounds of the same
 * tone -- the facts list and the footer columns already use one.
 */
.idp-sec--dark + .idp-sec--dark,
.idp-sec--stone + .idp-sec--stone,
.idp-sec--light + .idp-sec--light { border-top: 1px solid var(--idp-line-dk); }
.idp-sec--stone + .idp-sec--stone,
.idp-sec--light + .idp-sec--light { border-top-color: var(--idp-line); }
.idp-sec--tight { padding-block-start: 0; }

.idp-sec--light { background: var(--idp-white); color: var(--idp-ink); }
.idp-sec--stone { background: var(--idp-stone); color: var(--idp-ink); }
.idp-sec--dark  { background: var(--idp-ink);   color: var(--idp-white); }

.idp-sec--dark .idp-prose p { color: var(--idp-steel-lt); }

/* --- The drawing-sheet section label ---------------------------------- */
.idp-seclabel {
  font: 500 11px/1 var(--idp-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--idp-steel);
  margin: 0 0 clamp(32px, 4vw, 56px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--idp-line);
  display: flex; align-items: baseline; gap: 14px;
}
.idp-seclabel span { color: var(--idp-red); }
.idp-sec--dark .idp-seclabel { color: var(--idp-steel-lt); border-bottom-color: var(--idp-line-dk); }
.idp-sec--dark .idp-seclabel span { color: var(--idp-red-lt); }

.idp-eyebrow {
  font: 500 11px/1 var(--idp-mono);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--idp-steel-lt);
  margin: 0 0 clamp(22px, 3vw, 34px);
}

/* --- Headings ---------------------------------------------------------- */
.idp-h1 {
  font-size: clamp(2.15rem, 4.5vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 600;
  margin: 0 0 clamp(22px, 3vw, 32px);
  text-wrap: balance;
}
.idp-h2 {
  font-size: clamp(1.85rem, 3.6vw, 3.1rem);
  line-height: 1.07;
  letter-spacing: -.03em;
  font-weight: 600;
  margin: 0 0 24px;
  text-wrap: balance;
}
.idp-h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.2; letter-spacing: -.02em; font-weight: 600;
  margin: 0 0 12px;
}
.idp-minih {
  font: 500 11px/1 var(--idp-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--idp-steel);
  margin: 0 0 20px;
}
.idp-minih--light { color: var(--idp-steel-lt); }
/* Any small-caps label on an ink ground, whether or not the call site
   remembered the modifier. --idp-steel is a light-ground colour. */
.idp-sec--dark .idp-minih, .idp-footer .idp-minih { color: var(--idp-steel-lt); }
.idp-minih--sp { margin-top: 36px; }

.idp-lede {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--idp-steel-lt);
  max-width: 54ch;
  margin: 0 0 clamp(28px, 4vw, 40px);
}
.idp-standfirst {
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  line-height: 1.35; letter-spacing: -.02em;
  color: inherit; font-weight: 500;
  margin: 0 0 18px;
}
.idp-prose p { margin: 0 0 1.1em; max-width: 62ch; color: var(--idp-steel); }
.idp-prose p:last-child { margin-bottom: 0; }
.idp-prose--lg p { font-size: clamp(1rem, 1.25vw, 1.12rem); }
.idp-prose--tight p { max-width: 56ch; }
.idp-pull {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.25; letter-spacing: -.02em;
  color: var(--idp-ink) !important; font-weight: 600;
  border-left: 2px solid var(--idp-red);
  padding-left: 20px; margin-top: 1.6em !important;
}

/* --- Buttons ----------------------------------------------------------- */
.idp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px;
  font: 500 14px/1 var(--idp-sans); letter-spacing: .01em;
  text-decoration: none; border: 1px solid transparent; border-radius: 2px;
  transition: background .2s var(--idp-ease), color .2s var(--idp-ease), border-color .2s var(--idp-ease);
  cursor: pointer;
}
.idp-body .idp-btn--solid,
.idp-body .idp-btn--solid:hover,
.idp-body .idp-btn--solid:focus,
.idp-body .idp-btn--solid:active { color: #fff; }
.idp-btn--solid { background: var(--idp-red); border-color: var(--idp-red); }
.idp-btn--solid:hover { background: #a60d26; border-color: #a60d26; }
/* No opacity on the ghost button: dropping currentColor to 85% took the label
   from 4.88:1 to 4.07:1 against white. The border carries the softer weight
   instead, and the label stays at full strength. */
.idp-body .idp-btn--ghost,
.idp-body .idp-btn--ghost:hover,
.idp-body .idp-btn--ghost:focus,
.idp-body .idp-btn--ghost:active { color: inherit; }
.idp-btn--ghost { background: transparent; border-color: currentColor; }
.idp-btn--ghost { border-color: color-mix(in srgb, currentColor 45%, transparent); }
.idp-btn--ghost:hover { border-color: currentColor; background: rgba(255,255,255,.06); }
.idp-sec--light .idp-btn--ghost:hover,
.idp-sec--stone .idp-btn--ghost:hover { background: rgba(18,20,22,.05); }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */

.idp-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(18, 20, 22, .92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--idp-line-dks);
  color: #fff;
}
.idp-header__in {
  max-width: var(--idp-max); margin-inline: auto;
  padding: 0 var(--idp-gut);
  min-height: 70px;
  display: flex; align-items: center; gap: 28px;
}

.idp-mark-link { text-decoration: none; display: block; }
.idp-mark { display: flex; align-items: center; gap: 11px; }

.idp-mark__i { width: 30px; height: 30px; flex: none; display: block; }
.idp-mark__box { fill: var(--idp-mark-bg); }
.idp-mark__col { fill: var(--idp-mark-fg); }

/* Concept 2's divider: a hairline between the mark and the name. */
.idp-mark__rule {
  width: 1px; align-self: stretch; flex: none;
  min-height: 30px;
  background: currentColor; opacity: .26;
}
.idp-mark__name {
  font: 600 13px/1.26 var(--idp-sans);
  letter-spacing: .005em; text-transform: uppercase;
}
/* The approved lockups set the second line lighter and letterspaced under a
   heavier first line. Matched here so the placeholder reads as the same
   structure the real mark will drop into. */
.idp-mark__name em {
  display: block;
  font-style: normal; font-weight: 400; font-size: 10.5px;
  letter-spacing: .13em; opacity: .66;
}

.idp-nav { margin-left: auto; }
.idp-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.idp-nav__link {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px;
  font: 500 13.5px/1 var(--idp-sans);
  color: rgba(255,255,255,.76); text-decoration: none;
  transition: color .18s var(--idp-ease);
}
.idp-nav__link:hover { color: #fff; }
.idp-nav__link--cta {
  border: 1px solid rgba(255,255,255,.3);
  margin-left: 10px; border-radius: 2px;
}
.idp-nav__link--cta:hover { background: var(--idp-red); border-color: var(--idp-red); color: #fff; }

.idp-parentlink {
  font: 500 11px/1 var(--idp-mono);
  letter-spacing: .1em; text-transform: uppercase;
  display: inline-flex; align-items: center; min-height: 24px;
  color: rgba(255,255,255,.58); text-decoration: none;
  padding-left: 24px; margin-left: 4px;
  border-left: 1px solid var(--idp-line-dks);
  transition: color .18s var(--idp-ease);
}
.idp-parentlink:hover { color: rgba(255,255,255,.8); }

.idp-burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; color: #fff;
}
.idp-burger__box { display: grid; gap: 6px; place-content: center; height: 100%; }
.idp-burger__box i { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .25s var(--idp-ease), opacity .2s; }
.idp-burger[aria-expanded="true"] i:first-child { transform: translateY(3.75px) rotate(45deg); }
.idp-burger[aria-expanded="true"] i:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

.idp-mobile { display: none; }

@media (max-width: 1040px) {
  .idp-nav, .idp-parentlink { display: none; }
  .idp-burger { display: block; }
  .idp-mobile { display: block; border-top: 1px solid var(--idp-line-dks); padding: 10px var(--idp-gut) 26px; }
  .idp-mobile[hidden] { display: none; }
  .idp-mobile__list { list-style: none; margin: 0; padding: 0; }
  .idp-mobile__list a {
    display: block; padding: 15px 0;
    font: 500 1.05rem/1.2 var(--idp-sans); letter-spacing: -.01em;
    color: #fff; text-decoration: none;
    border-bottom: 1px solid var(--idp-line-dks);
  }
  .idp-mobile__parent {
    display: inline-block; margin-top: 20px;
    font: 500 11px/1 var(--idp-mono); letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.5); text-decoration: none;
  }
}

/* Without JS the panel stays open rather than being unreachable. Scoped to the
   breakpoint where the burger actually replaces the nav — unscoped, a
   script-less desktop rendered the mobile panel underneath the real one. */
@media (max-width: 1040px) {
  .no-js .idp-mobile[hidden] { display: block; }
  .no-js .idp-burger { display: none; }
}

/* =========================================================================
   01 HERO — split. Type on ink, the real site photograph beside it.
   ========================================================================= */

.idp-hero {
  background: var(--idp-ink); color: #fff;
  display: grid; grid-template-columns: 1fr;
}
.idp-hero__copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(56px, 8vw, 110px) var(--idp-gut) 0;
}
.idp-hero__copyin { max-width: 720px; margin-left: auto; width: 100%; }
.idp-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.idp-hero__media { position: relative; margin: 0; }
.idp-hero__img { width: 100%; height: 100%; object-fit: cover; }

/*
 * On a phone the image leads. The brief asks specifically not to ship a shrunk
 * desktop hero, and a visitor on a phone should see a real site under
 * construction before they see a sentence about one. The headline still lands
 * immediately below it, within the first thumb-scroll.
 */
@media (max-width: 899px) {
  .idp-hero { display: flex; flex-direction: column; }
  .idp-hero__media { order: -1; height: 38vh; min-height: 260px; max-height: 420px; }
  .idp-hero__copy { padding-top: clamp(40px, 7vw, 64px); }
}
.idp-hero__cap {
  position: absolute; left: 0; bottom: 0;
  padding: 14px 18px;
  background: rgba(10, 11, 12, .72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; gap: 3px;
}
.idp-cap__k { font: 600 11px/1 var(--idp-mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.idp-cap__v { font: 400 11px/1.3 var(--idp-mono); letter-spacing: .06em; color: rgba(255,255,255,.64); }

/* The project index strip under the hero copy. */
.idp-ticker {
  list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0;
  border-top: 1px solid var(--idp-line-dk);
  max-width: 720px; margin-left: auto; width: 100%;
}
.idp-ticker a {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline; gap: 10px;
  padding: 17px 0;
  border-bottom: 1px solid var(--idp-line-dks);
  text-decoration: none;
  transition: padding-left .25s var(--idp-ease);
}
.idp-ticker a:hover { padding-left: 10px; }
.idp-ticker__city { font: 600 1.05rem/1 var(--idp-sans); letter-spacing: -.02em; color: #fff; }
.idp-ticker__state { font: 500 10.5px/1 var(--idp-mono); letter-spacing: .12em; color: var(--idp-steel-lt); }
.idp-ticker__status {
  justify-self: end; text-align: right;
  font: 500 10.5px/1.35 var(--idp-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--idp-red-lt);
}
/* The ticker now carries a progress phrase rather than a one-word status, so it
   is allowed to wrap on a narrow screen instead of colliding with the city. */
@media (max-width: 480px) {
  .idp-ticker a { grid-template-columns: auto auto; row-gap: 5px; }
  .idp-ticker__status { grid-column: 1 / -1; justify-self: start; text-align: left; }
}

@media (min-width: 900px) {
  .idp-hero {
    grid-template-columns: 1fr minmax(340px, 40%);
    min-height: min(88vh, 860px);
    align-items: stretch;
  }
  .idp-hero__copy { padding-block: clamp(70px, 7vw, 120px) clamp(44px, 5vw, 72px); }
  .idp-hero__copyin, .idp-ticker { margin-left: 0; max-width: 720px; }
  .idp-hero__media { height: 100%; }
}

/* =========================================================================
   02 / shared two-column split
   ========================================================================= */

.idp-split { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 900px) {
  .idp-split { grid-template-columns: 1.05fr 1fr; align-items: start; }
}

/* =========================================================================
   03 PORTFOLIO
   ========================================================================= */

.idp-portfolio__head { display: grid; gap: clamp(20px, 3vw, 44px); }
@media (min-width: 900px) {
  .idp-portfolio__head { grid-template-columns: 1fr 1fr; align-items: end; }
}

.idp-projects {
  list-style: none; margin: clamp(48px, 6vw, 88px) 0 0; padding: 0;
  border-top: 1px solid var(--idp-line-dk);
}
.idp-project { border-bottom: 1px solid var(--idp-line-dk); }

.idp-project__link {
  display: grid; gap: clamp(20px, 3vw, 44px);
  padding: clamp(32px, 4vw, 56px) var(--idp-gut);
  max-width: var(--idp-max); margin-inline: auto;
  text-decoration: none; color: inherit;
  position: relative;
}
.idp-project__index {
  position: absolute; top: clamp(32px, 4vw, 56px); right: var(--idp-gut);
  font: 500 11px/1 var(--idp-mono); letter-spacing: .1em; color: rgba(255,255,255,.5);
}

.idp-project__media { position: relative; overflow: hidden; background: var(--idp-graphite); }
.idp-project__img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .7s var(--idp-ease), filter .5s var(--idp-ease);
  filter: saturate(.95);
}
.idp-project__link:hover .idp-project__img { transform: scale(1.035); filter: saturate(1.05); }

.idp-project__body { display: block; align-self: center; }
.idp-project__meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font: 500 10.5px/1 var(--idp-mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--idp-steel-lt); margin-bottom: 18px;
}
.idp-project__meta b { color: var(--idp-red-lt); font-weight: 500; }
.idp-project__meta i { opacity: .45; font-style: normal; }
/* The progress detail sits a step quieter than the controlled status, so the
   label still reads first and the evidence qualifies it. */
.idp-project__detail { color: var(--idp-steel-lt); }

.idp-project__city {
  display: block;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: .96;
  letter-spacing: -.04em; font-weight: 600; color: #fff;
}
.idp-project__state {
  display: block; margin-top: 8px;
  font-size: 1.02rem; color: var(--idp-steel-lt); letter-spacing: -.01em;
}
.idp-project__addr {
  display: block; margin-top: 18px;
  font: 400 12px/1.65 var(--idp-mono); letter-spacing: .03em;
  color: rgba(255,255,255,.52);
}
.idp-project__sum {
  display: block; margin-top: 20px; max-width: 48ch;
  color: var(--idp-steel-lt); font-size: .97rem; line-height: 1.62;
}
.idp-project__go {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  font: 500 13px/1 var(--idp-sans); color: #fff;
  padding-bottom: 7px; border-bottom: 1px solid var(--idp-red-lt);
}
.idp-project__go i { transition: transform .3s var(--idp-ease); font-style: normal; }
.idp-project__link:hover .idp-project__go i { transform: translateX(6px); }

@media (min-width: 900px) {
  .idp-project__link { grid-template-columns: minmax(0, 46%) 1fr; align-items: center; }
  /* Alternate the image side so the list reads as a sequence, not a stack. */
  .idp-project:nth-child(even) .idp-project__link > .idp-project__media { order: 2; }
  .idp-project:nth-child(even) .idp-project__link > .idp-project__body  { order: 1; }
  .idp-project__img { aspect-ratio: 3 / 2; }
}

/* The drawing-sheet plate for a project with no photography. */
.idp-plate {
  width: 100%; aspect-ratio: 4 / 3; display: block;
  background: var(--idp-graphite); color: var(--idp-steel-lt);
}
@media (min-width: 900px) { .idp-plate { aspect-ratio: 3 / 2; } }
.idp-plate__city {
  font: 600 62px/1 var(--idp-sans); letter-spacing: -.03em;
  fill: rgba(255,255,255,.94);
}
.idp-plate__meta {
  font: 500 16px/1 var(--idp-mono); letter-spacing: .14em;
  /* 4.5:1 on the graphite plate. SVG <text> is real informational text and was
     missed by the earlier contrast sweep, which only walked HTML nodes. */
  fill: rgba(255,255,255,.72);
}
.idp-sec--light .idp-plate, .idp-sec--stone .idp-plate { background: var(--idp-concrete); color: var(--idp-graphite); }
.idp-sec--light .idp-plate__city, .idp-sec--stone .idp-plate__city { fill: rgba(18,20,22,.82); }
.idp-sec--light .idp-plate__meta, .idp-sec--stone .idp-plate__meta { fill: rgba(18,20,22,.72); }

.idp-empty { color: var(--idp-steel-lt); }

/* =========================================================================
   04 OPERATOR ADVANTAGE — annotated site image
   ========================================================================= */

.idp-advantage__grid { display: grid; gap: clamp(36px, 5vw, 64px); margin-top: clamp(32px, 4vw, 52px); }
@media (min-width: 900px) {
  .idp-advantage__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
}

.idp-annot { margin: 0; }
.idp-annot__media { position: relative; background: var(--idp-concrete); }
.idp-annot__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

.idp-annot__pt {
  position: absolute; transform: translate(-50%, -50%);
  width: 26px; height: 26px;
}
.idp-annot__pt i {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--idp-red); color: #fff;
  font: 600 11px/1 var(--idp-mono); font-style: normal;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(200, 16, 46, .22);
}
/* Markers are decoration over a photo; the ordered key below is the content. */
@media (max-width: 700px) { .idp-annot__pt { display: none; } }

.idp-annot__key {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--idp-line);
  border-block: 1px solid var(--idp-line);
}
.idp-annot__key li {
  background: var(--idp-stone);
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 2px;
  font-size: .93rem; color: var(--idp-graphite);
}
.idp-annot__key li span {
  font: 600 10.5px/1 var(--idp-mono); color: var(--idp-red);
  flex: none; width: 14px;
}
@media (min-width: 620px) { .idp-annot__key { grid-template-columns: 1fr 1fr; } }

.idp-annot__note {
  margin: 14px 0 0;
  font: 400 11.5px/1.5 var(--idp-mono); letter-spacing: .04em; color: var(--idp-steel);
}

/* =========================================================================
   05 PATHWAYS + CAPABILITIES
   ========================================================================= */

.idp-pathways {
  list-style: none; margin: clamp(44px, 5vw, 76px) 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--idp-line);
  border-block: 1px solid var(--idp-line);
}
/* Two-column step added. Three columns went straight to one at 880px, so the
   measure jumped from 28 characters per line to 93 — both ends outside the
   readable 45-75 band, with nothing in between. */
@media (min-width: 760px)  { .idp-pathways { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .idp-pathways { grid-template-columns: repeat(3, 1fr); } }
.idp-pathway { background: var(--idp-white); padding: clamp(28px, 3vw, 44px) clamp(22px, 2.4vw, 38px); }
.idp-pathway__num {
  display: block; margin-bottom: clamp(28px, 4vw, 52px);
  font: 500 11px/1 var(--idp-mono); letter-spacing: .14em; color: var(--idp-red);
}
.idp-pathway p { margin: 0; color: var(--idp-steel); font-size: .95rem; max-width: 58ch; }

.idp-caps {
  list-style: none; margin: clamp(32px, 4vw, 52px) 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--idp-line);
  border: 1px solid var(--idp-line);
}
@media (min-width: 760px)  { .idp-caps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .idp-caps { grid-template-columns: repeat(3, 1fr); } }
.idp-cap { background: var(--idp-white); padding: clamp(24px, 2.6vw, 36px); }
.idp-cap__h { font-size: 1.04rem; line-height: 1.25; letter-spacing: -.018em; font-weight: 600; margin: 0 0 11px; }
.idp-cap p { margin: 0; color: var(--idp-steel); font-size: .95rem; line-height: 1.62; max-width: 58ch; }

/* =========================================================================
   07 PROCESS RAIL
   ========================================================================= */

.idp-process__head { display: grid; gap: 14px; max-width: 760px; }

.idp-rail { margin-top: clamp(44px, 5vw, 76px); }
.idp-rail__track { position: relative; }
/* Retired with the six-column rail. Kept as a no-op so the markup and the
   scroll handler in idp.js degrade silently rather than erroring. */
.idp-rail__line, .idp-rail__fill { display: none; }
.idp-rail__list {
  list-style: none; margin: 0; padding: 0 var(--idp-gut);
  display: grid; gap: 1px;
  background: var(--idp-line-dk);
  border-block: 1px solid var(--idp-line-dk);
  max-width: var(--idp-max); margin-inline: auto;
}
.idp-stage { background: var(--idp-ink); padding: 26px 0; }
.idp-stage__num {
  display: block; margin-bottom: 14px;
  font: 500 11px/1 var(--idp-mono); letter-spacing: .14em; color: var(--idp-red-lt);
}
.idp-stage__h { font-size: 1.1rem; letter-spacing: -.02em; font-weight: 600; margin: 0 0 9px; color: #fff; }
.idp-stage__p { margin: 0; color: var(--idp-steel-lt); font-size: .93rem; line-height: 1.62; max-width: 52ch; }

/* Six across put body copy at 14-24 characters per line across the whole
   desktop range — a column of fragments, not prose. Three across on two rows
   measures ~50ch. Each stage now carries its own top rule instead of one shared
   scroll-filled hairline, which works at any column count. */
@media (min-width: 760px) {
  .idp-rail__list {
    grid-template-columns: repeat(2, 1fr);
    background: none; border: 0;
    column-gap: 40px; row-gap: 44px;
  }
  .idp-stage {
    padding: 22px 24px 0 0;
    border-top: 1px solid var(--idp-line-dk);
  }
  .idp-stage:first-child { border-top-color: var(--idp-red-lt); }
}
@media (min-width: 1040px) {
  .idp-rail__list { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
   08 BUILT TO A STANDARD
   ========================================================================= */

.idp-standard__grid { display: grid; gap: clamp(32px, 4vw, 60px); }
@media (min-width: 900px) {
  .idp-standard__grid { grid-template-columns: 1fr minmax(0, 46%); align-items: center; }
}
.idp-standard__fig { margin: 0; }
.idp-standard__fig img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.idp-standard__fig figcaption,
.idp-video__item figcaption {
  margin-top: 13px;
  font: 400 11.5px/1.5 var(--idp-mono); letter-spacing: .04em; color: var(--idp-steel);
}
/* The film sits on an ink ground; --idp-steel is a light-ground colour. */
.idp-sec--dark .idp-video__item figcaption { color: var(--idp-steel-lt); }

/* =========================================================================
   09 PARTNERS + FORM
   ========================================================================= */

.idp-partners__head { display: grid; gap: clamp(18px, 2.5vw, 40px); }
@media (min-width: 900px) { .idp-partners__head { grid-template-columns: 1fr 1fr; align-items: end; } }

.idp-partners__cols { display: grid; gap: clamp(40px, 5vw, 72px); margin-top: clamp(40px, 5vw, 72px); }
@media (min-width: 900px) { .idp-partners__cols { grid-template-columns: minmax(0, 320px) 1fr; } }

.idp-partners__ask {
  margin: 0 0 14px; max-width: 34ch;
  color: var(--idp-steel-lt); font-size: .97rem; line-height: 1.6;
}
.idp-partners__ask--fine { font-size: .88rem; }

.idp-tags { list-style: none; margin: 0 0 8px; padding: 0; }
.idp-tags li {
  padding: 12px 0;
  border-bottom: 1px solid var(--idp-line-dks);
  font-size: .93rem; color: var(--idp-steel-lt);
}

/* --- Form -------------------------------------------------------------- */
.idp-form { display: grid; gap: clamp(24px, 3vw, 36px); }
.idp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.idp-form__set { border: 0; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 620px) { .idp-form__set { grid-template-columns: 1fr 1fr; } }
.idp-form__legend {
  font: 500 11px/1 var(--idp-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--idp-steel-lt); padding: 0 0 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--idp-line-dks); width: 100%;
  grid-column: 1 / -1;
}
.idp-field { display: grid; gap: 8px; }
.idp-field--full { grid-column: 1 / -1; }
.idp-field label {
  font: 500 12.5px/1.2 var(--idp-sans); color: rgba(255,255,255,.88);
  display: flex; align-items: baseline; gap: 8px;
}
.idp-req {
  font: 500 9.5px/1 var(--idp-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--idp-red-lt);
}
.idp-field input, .idp-field select, .idp-field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: rgba(255,255,255,.07);
  /* 3:1 against the section ground. An empty control is identified only by its
     boundary, so this is a non-text contrast requirement (WCAG 1.4.11), not a
     decorative hairline — which is what --idp-line-dk (1.87:1) was. */
  border: 1px solid rgba(255,255,255,.42); border-radius: 2px;
  color: #fff; font: 400 15px/1.4 var(--idp-sans);
  transition: border-color .18s var(--idp-ease), background .18s var(--idp-ease);
  -webkit-appearance: none; appearance: none;
}
.idp-field textarea { min-height: 112px; resize: vertical; }
.idp-field select {
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%),
                    linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 40px;
}
.idp-field select option { color: #111; }
.idp-field input::placeholder, .idp-field textarea::placeholder { color: rgba(255,255,255,.48); }
.idp-field input:focus, .idp-field select:focus, .idp-field textarea:focus {
  border-color: var(--idp-red-lt); background: rgba(255,255,255,.08);
}

.idp-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.idp-form__fine { margin: 0; font-size: .85rem; color: var(--idp-steel-lt); max-width: 44ch; }

.idp-form__notice {
  grid-column: 1 / -1; margin: 0;
  padding: 15px 18px; border-left: 2px solid;
  font-size: .95rem;
}
.idp-form__notice--ok { border-color: var(--idp-red-lt); background: rgba(255,255,255,.05); color: #fff; }
.idp-form__notice--error { border-color: #E8415C; background: rgba(232,65,92,.1); color: #fff; }

/* =========================================================================
   PROJECT PAGE
   ========================================================================= */

/*
 * The project hero is a split, not an overlay -- the same arrangement as the
 * homepage hero.
 *
 * It was an overlay: the photograph filled the section and the copy sat on top
 * of it behind a scrim. That scrim had to be tuned per photograph, and it was
 * tuned twice and failed twice. At .62 image opacity it blacked out a dark
 * frame; re-tuned to .85 with a bottom-weighted ramp, the ramp still sat at
 * .93 across the middle of the band, so Anna's hero rendered as a near-black
 * field with an invisible building in it.
 *
 * The underlying problem is that overlaid type makes legibility a function of
 * whichever image a project happens to have, and this register is meant to
 * take a tenth project whose photography nobody here has seen. Putting the
 * copy on solid ink removes the image from the contrast calculation entirely.
 */
.idp-phero { position: relative; background: var(--idp-ink); color: #fff; }
.idp-phero__media { position: relative; }
/* .62 was tuned against a bright aerial and failed on a darker photograph —
   Anna's hero rendered as an almost black field on desktop. The image now sits
   at .85 and the scrim below does the contrast work where the text actually is. */
/* Full strength. Nothing is printed over it any more. */
.idp-phero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/*
 * The rendering label. Sits on the image, bottom-left, on its own scrim --
 * the only place on this page where type is printed over a picture, and it is
 * a fixed two-line block so the scrim can be sized for it rather than tuned
 * per photograph. Measured 12.6:1 against the darkest corner of the dusk
 * rendering and 8.9:1 against its brightest.
 */
.idp-phero__tag {
  position: absolute; left: 0; bottom: 0; margin: 0;
  padding: 12px 18px 13px;
  background: rgba(10,11,12,.82);
  border-top-right-radius: 2px;
  display: grid; gap: 3px;
  max-width: min(100%, 420px);
}
.idp-phero__tagl {
  font: 500 10.5px/1.2 var(--idp-mono); letter-spacing: .14em;
  text-transform: uppercase; color: #fff;
}
.idp-phero__tagn {
  font: 400 11px/1.4 var(--idp-mono); letter-spacing: .03em;
  color: rgba(255,255,255,.72);
}

/* The no-photography hero ground: a plan grid with a diagonal hatch band,
   drawn in CSS so it scales to any hero size without distorting. */
.idp-phero__media--grid {
  background-color: var(--idp-graphite);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 9px),
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
}

.idp-phero__copy {
  position: relative;
  background: var(--idp-ink);
  padding-block: clamp(44px, 7vw, 72px) clamp(40px, 6vw, 64px);
}

/*
 * Phone and small tablet: the photograph leads, the copy sits under it. Same
 * reasoning as the homepage -- a visitor on a phone should see the site before
 * they see the name of it.
 */
@media (max-width: 899px) {
  .idp-phero { display: flex; flex-direction: column; }
  .idp-phero__media { order: -1; height: 42vh; min-height: 240px; max-height: 400px; }
}

@media (min-width: 900px) {
  .idp-phero {
    display: grid;
    grid-template-columns: 1fr minmax(340px, 42%);
    align-items: stretch;
    min-height: min(72vh, 680px);
    /*
     * The page's own content edge, so the hero's first character sits on the
     * same vertical as every heading below it. Derived rather than guessed:
     * half the leftover width outside the wrap, plus the gutter.
     */
    --idp-edge: max(var(--idp-gut), calc((100vw - var(--idp-max)) / 2 + var(--idp-gut)));
  }
  .idp-phero__media { order: 2; height: 100%; }
  .idp-phero__copy {
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-block: clamp(64px, 7vw, 104px) clamp(52px, 6vw, 84px);
    padding-inline: var(--idp-edge) clamp(32px, 4vw, 64px);
  }
  /* The wrap has already done its centring job at the section edge above. */
  .idp-phero__copy > .idp-wrap { max-width: 680px; margin-inline: 0; padding-inline: 0; }

  /*
   * Band hero: a landscape image runs full width above the copy instead of
   * being cropped into the split's tall column. Overrides the split rules
   * above rather than being written as a separate layout, so the two cannot
   * drift apart.
   */
  .idp-phero--band { display: flex; flex-direction: column; min-height: 0; }
  .idp-phero--band .idp-phero__media {
    order: -1; width: 100%; height: auto;
    aspect-ratio: 16 / 9; max-height: 62vh;
  }
  .idp-phero--band .idp-phero__copy {
    display: block;
    padding-inline: 0;
    padding-block: clamp(44px, 5vw, 68px) clamp(44px, 6vw, 72px);
  }
  .idp-phero--band .idp-phero__copy > .idp-wrap {
    max-width: var(--idp-max); margin-inline: auto; padding-inline: var(--idp-gut);
  }
}

.idp-crumbs {
  font: 500 11px/1 var(--idp-mono); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: clamp(28px, 4vw, 48px);
  display: flex; gap: 10px; align-items: center;
}
.idp-crumbs a {
  display: inline-flex; align-items: center; min-height: 24px;
  color: rgba(255,255,255,.72); text-decoration: none;
}
.idp-crumbs a:hover { color: #fff; }
.idp-crumbs span[aria-current] { color: rgba(255,255,255,.5); }

.idp-phero__meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 20px;
  font: 500 10.5px/1 var(--idp-mono); letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.idp-phero__meta b { color: var(--idp-red-lt); font-weight: 500; }
.idp-phero__meta i { opacity: .45; font-style: normal; }
.idp-phero__detail { color: rgba(255,255,255,.72); }

.idp-phero__h1 {
  font-size: clamp(3rem, 9vw, 7rem); line-height: .9;
  letter-spacing: -.045em; font-weight: 600; margin: 0;
}
.idp-phero__place { margin: 14px 0 0; font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: rgba(255,255,255,.76); letter-spacing: -.015em; }
.idp-phero__addr {
  margin: 20px 0 0; font: 400 12.5px/1.6 var(--idp-mono);
  letter-spacing: .03em; color: rgba(255,255,255,.55); font-style: normal;
}

/* --- Overview + facts --------------------------------------------------- */
.idp-pgrid { display: grid; gap: clamp(40px, 5vw, 76px); }
@media (min-width: 900px) { .idp-pgrid { grid-template-columns: 1fr minmax(0, 330px); } }

.idp-facts { margin: 0; display: grid; border-top: 1px solid var(--idp-line); }
.idp-facts__row { display: grid; gap: 4px; padding: 15px 0; border-bottom: 1px solid var(--idp-line-soft); }
.idp-facts dt {
  font: 500 10.5px/1 var(--idp-mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--idp-steel);
}
.idp-facts dd { margin: 0; font-size: .97rem; color: var(--idp-ink); }

.idp-partnerlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--idp-line); }
.idp-partnerlist li { padding: 15px 0; border-bottom: 1px solid var(--idp-line-soft); }
.idp-partnerlist__n { display: block; font-weight: 600; font-size: .98rem; letter-spacing: -.01em; }
.idp-partnerlist__r {
  display: block; margin-top: 3px;
  font: 400 11px/1.4 var(--idp-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--idp-steel);
}

/* --- Timeline ----------------------------------------------------------- */
.idp-ptimeline__now { margin: 0 0 clamp(36px, 4vw, 56px); color: var(--idp-steel-lt); font-size: 1rem; }
.idp-ptimeline__now b { color: var(--idp-red-lt); font-weight: 500; }

.idp-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--idp-line-dk); }
.idp-tl__item { background: var(--idp-ink); padding: 24px 0 26px; position: relative; }
.idp-tl__dot {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 2px; background: var(--idp-line-dk);
}
.idp-tl__item--done .idp-tl__dot { background: rgba(255,255,255,.4); }
.idp-tl__item--current .idp-tl__dot { background: var(--idp-red-lt); }
.idp-tl__num { font: 500 11px/1 var(--idp-mono); letter-spacing: .14em; color: var(--idp-steel-lt); }
.idp-tl__item--done .idp-tl__num { color: var(--idp-steel-lt); }
.idp-tl__item--current .idp-tl__num { color: var(--idp-red-lt); }
.idp-tl__h { font-size: 1.08rem; letter-spacing: -.02em; font-weight: 600; margin: 12px 0 8px; color: rgba(255,255,255,.55); }
.idp-tl__item--done .idp-tl__h, .idp-tl__item--current .idp-tl__h { color: #fff; }
.idp-tl__date { margin: 0 0 8px; font: 500 11.5px/1 var(--idp-mono); letter-spacing: .06em; color: var(--idp-steel-lt); }
.idp-tl__p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--idp-steel-lt); max-width: 38ch; }
.idp-tl__item--done .idp-tl__p, .idp-tl__item--current .idp-tl__p { color: #C3C9CE; }
.idp-tl__flag {
  margin: 12px 0 0; font: 500 10px/1 var(--idp-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--idp-red-lt);
}
@media (min-width: 760px) {
  .idp-tl { grid-template-columns: repeat(3, 1fr); background: none; column-gap: 28px; row-gap: 30px; }
  .idp-tl__item { padding: 18px 16px 0 0; }
}
/*
 * The timeline stays three-up on desktop.
 *
 * Six columns fitted all stages on one row, but each stage carries a
 * sentence, and a sixth of the band is roughly 14ch -- the prose wrapped to
 * five or six lines inside a dark panel and stopped being scannable. Three
 * columns over two rows holds the measure near the 38ch max-width the type
 * is set for.
 */
@media (min-width: 1040px) {
  .idp-tl { column-gap: 40px; row-gap: 34px; }
  .idp-tl__item { padding: 18px 20px 0 0; }
}

/* --- Gallery ------------------------------------------------------------ */
.idp-gallery__note { margin: -8px 0 clamp(28px, 3.5vw, 44px); font: 400 11.5px/1.5 var(--idp-mono); letter-spacing: .04em; color: var(--idp-steel); }
.idp-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px)  { .idp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .idp-grid { grid-template-columns: repeat(3, 1fr); } }

.idp-grid__btn {
  display: block; width: 100%; padding: 0; border: 0; background: var(--idp-concrete);
  cursor: zoom-in; position: relative; overflow: hidden; text-align: left; color: inherit;
}
.idp-grid__img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .6s var(--idp-ease);
}
.idp-grid__btn:hover .idp-grid__img { transform: scale(1.04); }
/* A solid band rather than a gradient fade.
   The caption sits over photography of unknown brightness, and a gradient that
   is ~0.55 alpha where the title sits gives only ~4.4:1 against a bright sky —
   under the bar, and dependent on the image. A solid scrim is 11.9:1 against
   anything, and it matches the hero caption's treatment, so the device reads
   as one idea rather than two. */
.idp-grid__cap {
  position: absolute; inset: auto 0 0 0; padding: 10px 14px 11px;
  background: rgba(10,11,12,.82);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: grid; gap: 3px;
}
.idp-grid__capt { font: 500 12.5px/1.3 var(--idp-sans); color: #fff; }
.idp-grid__capd { font: 400 10.5px/1 var(--idp-mono); letter-spacing: .1em; color: rgba(255,255,255,.76); }

/* --- Video -------------------------------------------------------------- */
/* Landscape is the default; a portrait clip is capped much narrower so a
   vertical phone video does not run the height of the viewport. The ratio
   itself is set inline from the register — see page-idp-project.php. */
.idp-video__item { margin: 0 0 clamp(28px, 4vw, 48px); max-width: 880px; }
.idp-video__item:last-child { margin-bottom: 0; }
.idp-video__item--portrait { max-width: 420px; }
.idp-video__el { width: 100%; height: auto; background: #000; }

/* --- Next project ------------------------------------------------------- */
.idp-pnext__grid { display: grid; gap: clamp(32px, 4vw, 56px); }
@media (min-width: 900px) { .idp-pnext__grid { grid-template-columns: 1fr 1fr; align-items: center; } }
.idp-pnext__link {
  display: block; text-decoration: none; color: inherit;
  border-top: 1px solid var(--idp-line); padding-top: 24px; position: relative;
  transition: padding-left .3s var(--idp-ease);
}
.idp-pnext__link:hover { padding-left: 10px; }
.idp-pnext__city { display: block; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -.04em; font-weight: 600; }
.idp-pnext__meta {
  display: flex; gap: 9px; align-items: center; margin-top: 10px;
  font: 500 10.5px/1 var(--idp-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--idp-steel);
}
.idp-pnext__meta i { opacity: .5; font-style: normal; }
.idp-pnext__go { position: absolute; right: 0; top: 24px; color: var(--idp-red); }
.idp-pnext__cta p { color: var(--idp-steel); margin: 0 0 20px; max-width: 48ch; }
.idp-pnext__cta p:last-child { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 0; }

.idp-notfound { padding-block: clamp(90px, 14vw, 180px); }
.idp-notfound code { font: 400 .9em/1 var(--idp-mono); background: var(--idp-stone); padding: 3px 6px; }
.idp-notfound p { color: var(--idp-steel); margin-bottom: 20px; }

/* =========================================================================
   LIGHTBOX
   ========================================================================= */

.idp-lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 9, 10, .96);
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 48px);
}
.idp-lb[hidden] { display: none; }
.idp-lb__inner { position: relative; max-width: 1280px; width: 100%; }
.idp-lb__fig { margin: 0; display: grid; gap: 16px; justify-items: center; }
.idp-lb__img { max-height: 78vh; width: auto; max-width: 100%; object-fit: contain; }
.idp-lb__cap {
  font: 400 12px/1.5 var(--idp-mono); letter-spacing: .05em;
  color: rgba(255,255,255,.72); text-align: center; max-width: 60ch;
}
.idp-lb__close, .idp-lb__nav {
  position: absolute; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); color: #fff;
  width: 46px; height: 46px; cursor: pointer; border-radius: 2px;
  display: grid; place-items: center; font-size: 18px; line-height: 1;
  transition: background .18s var(--idp-ease);
}
.idp-lb__close:hover, .idp-lb__nav:hover { background: rgba(255,255,255,.18); }
.idp-lb__close { top: -58px; right: 0; }
.idp-lb__nav--prev { left: -4px; top: 50%; transform: translateY(-50%); }
.idp-lb__nav--next { right: -4px; top: 50%; transform: translateY(-50%); }
.idp-lb__nav i { font-style: normal; }
@media (max-width: 820px) {
  .idp-lb__close { top: -52px; }
  .idp-lb__nav--prev { left: 0; top: auto; bottom: -58px; transform: none; }
  .idp-lb__nav--next { right: 0; top: auto; bottom: -58px; transform: none; }
}
.idp-lb-open { overflow: hidden; }

/* =========================================================================
   FOOTER
   ========================================================================= */

.idp-footer { background: var(--idp-black); color: #fff; padding-block: clamp(56px, 7vw, 96px) 36px; }
.idp-footer__top { display: grid; gap: clamp(36px, 4vw, 56px); }
@media (min-width: 860px) { .idp-footer__top { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

/* The footer ground is #0A0B0C, darker than the header, so the square is
   lifted a step to keep its edge visible. */
.idp-footer__brand .idp-mark { margin-bottom: 20px; }
.idp-footer .idp-mark__box { fill: #3E464E; }
.idp-footer__desc {
  margin: 0 0 14px; font: 500 11px/1.6 var(--idp-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--idp-steel-lt);
}
.idp-footer__from { margin: 0; color: var(--idp-steel-lt); font-size: .92rem; max-width: 36ch; }
/*
 * Inline in a sentence, so SC 2.5.8's inline exception applies and the 18px
 * line box is not a failure. The padding costs nothing -- it does not change
 * the line box on an inline element -- and brings the pointer target to 24px.
 */
.idp-footer__from a {
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--idp-red-lt);
  padding-block: 3px;
}

.idp-footer__h {
  font: 500 10.5px/1 var(--idp-mono); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.58); margin: 0 0 16px;
}
.idp-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.idp-footer__col a {
  display: inline-flex; align-items: center; min-height: 24px;
  color: var(--idp-steel-lt); text-decoration: none; font-size: .93rem;
  transition: color .18s var(--idp-ease);
}
.idp-footer__col a:hover { color: #fff; }
.idp-footer__addr { margin: 16px 0 0; font-style: normal; color: var(--idp-steel-lt); font-size: .9rem; }

.idp-footer__bar {
  margin-top: clamp(40px, 5vw, 72px); padding-top: 24px;
  border-top: 1px solid var(--idp-line-dks);
  display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between;
}
.idp-footer__bar p { margin: 0; font: 400 11.5px/1.5 var(--idp-mono); letter-spacing: .04em; color: rgba(255,255,255,.56); }

/* =========================================================================
   MOTION

   One reveal mechanism for the whole site, driven by IntersectionObserver in
   idp.js. The initial state is applied by JS (.idp-reveal gets is-armed) so
   that content is never invisible if the script fails to run — a portfolio
   that hides itself from a broker with a strict script blocker is worse than
   one that does not animate.
   ========================================================================= */

.idp-reveal.is-armed {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--idp-dur) var(--idp-ease), transform var(--idp-dur) var(--idp-ease);
  will-change: opacity, transform;
}
.idp-reveal.is-armed.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .idp-body *, .idp-body *::before, .idp-body *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .idp-reveal.is-armed { opacity: 1 !important; transform: none !important; }
  .idp-project__link:hover .idp-project__img,
  .idp-grid__btn:hover .idp-grid__img { transform: none; }
}

@media (prefers-contrast: more) {
  .idp-body { --idp-steel: #4A5055; --idp-steel-lt: #C6CCD1; --idp-line: rgba(18,20,22,.3); --idp-line-dk: rgba(255,255,255,.34); }
}