/* Vertecia internal pages — visual system inherited from the approved homepage */
.conversion-inner main {
  overflow: hidden;
  background: var(--v3-white);
}

.vi-container {
  width: var(--v3-container);
  margin: 0 auto;
}

.vi-section {
  padding: 110px 0;
  background: var(--v3-white);
}

.vi-section--paper { background: var(--v3-paper); }
.vi-section--ink { background: var(--v3-ink); color: #fff; }

.vi-hero {
  padding: 150px 0 96px;
  background: var(--v3-paper);
}

.vi-hero-copy {
  max-width: 1020px;
  margin: 0 auto;
  text-align: center;
}

.vi-hero h1 {
  max-width: 980px;
  margin: 24px auto 0;
  font-family: "IBM Plex Sans Condensed", Arial, sans-serif;
  font-size: clamp(62px,7vw,92px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .92;
}

.vi-hero h1 em { color: var(--v3-orange); font-style: normal; }

.vi-hero-copy > p {
  max-width: 700px;
  margin: 24px auto 0;
  color: var(--v3-muted);
  font-size: 17px;
  line-height: 1.6;
}

.vi-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 11px;
  margin-top: 30px;
}

.vi-actions + small {
  display: block;
  margin-top: 14px;
  color: var(--v3-muted);
  font-size: 9px;
}

.vi-hero-media {
  position: relative;
  height: min(600px,56vw);
  margin-top: 60px;
  overflow: hidden;
  border-radius: 5px;
  background: #d8d2c8;
  box-shadow: 0 26px 70px rgba(17,21,18,.12);
}

.vi-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vi-media-label {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 7px 9px;
  border-radius: 2px;
  background: rgba(255,253,248,.92);
  color: var(--v3-ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  letter-spacing: .07em;
}

.vi-media-note {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: min(390px,calc(100% - 44px));
  padding: 24px;
  border-top: 4px solid var(--v3-orange);
  border-radius: 3px;
  background: rgba(17,21,18,.94);
  color: #fff;
  backdrop-filter: blur(12px);
}

.vi-media-note span {
  color: #ff9a75;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  letter-spacing: .07em;
}

.vi-media-note strong {
  display: block;
  margin-top: 9px;
  font-family: "IBM Plex Sans Condensed", Arial, sans-serif;
  font-size: 28px;
  letter-spacing: -.025em;
  line-height: 1;
}

.vi-media-note p {
  margin-top: 9px;
  color: rgba(255,255,255,.62);
  font-size: 11px;
  line-height: 1.5;
}

.vi-heading {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.vi-heading h2 {
  margin-top: 17px;
  font-family: "IBM Plex Sans Condensed", Arial, sans-serif;
  font-size: clamp(48px,5vw,68px);
  letter-spacing: -.045em;
  line-height: .96;
}

.vi-heading > p {
  max-width: 620px;
  margin: 17px auto 0;
  color: var(--v3-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Solutions */
.vi-solution-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  margin-top: 54px;
}

.vi-solution-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--v3-line);
  border-radius: 5px;
  background: var(--v3-white);
  transition: transform .35s var(--v3-ease), box-shadow .35s ease;
}

.vi-solution-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(17,21,18,.09);
}

.vi-solution-card figure {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: #d6d0c6;
}

.vi-solution-card figure::after {
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(transparent,rgba(17,21,18,.18));
  content: "";
}

.vi-solution-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s var(--v3-ease);
}

.vi-solution-card:hover img { transform: scale(1.035); }

.vi-solution-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 27px;
}

.vi-card-index {
  color: var(--v3-orange-dark);
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  letter-spacing: .08em;
}

.vi-solution-card h3 {
  margin-top: 20px;
  font-family: "IBM Plex Sans Condensed", Arial, sans-serif;
  font-size: 34px;
  letter-spacing: -.035em;
  line-height: 1;
}

.vi-solution-card p {
  margin-top: 12px;
  color: var(--v3-muted);
  font-size: 12px;
  line-height: 1.55;
}

.vi-output-list {
  display: grid;
  gap: 8px;
  margin: 23px 0 0;
  padding: 17px 0 0;
  border-top: 1px solid var(--v3-line);
  list-style: none;
}

.vi-output-list li {
  position: relative;
  padding-left: 15px;
  color: var(--v3-ink);
  font-size: 10px;
}

.vi-output-list li::before {
  position: absolute;
  top: 5px;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--v3-orange);
  content: "";
}

.vi-card-link {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-top: auto;
  padding-top: 25px;
  color: var(--v3-ink);
  font-size: 11px;
  font-weight: 700;
}

.vi-card-link span:last-child { color: var(--v3-orange); font-size: 18px; }

.vi-process-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 68px 58px;
  border-top: 6px solid var(--v3-orange);
  border-radius: 5px;
  background: var(--v3-ink);
  color: #fff;
}

.vi-process-shell .vi-heading h2 { max-width: 760px; margin-right: auto; margin-left: auto; }
.vi-process-shell .vi-heading > p { color: rgba(255,255,255,.58); }
.vi-process-shell .v3-eyebrow { color: #ff9a75; }

.vi-process-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  margin-top: 47px;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.vi-process-step {
  min-width: 0;
  min-height: 190px;
  padding: 26px;
  border-right: 1px solid rgba(255,255,255,.14);
  text-align: center;
}

.vi-process-step:last-child { border-right: 0; }
.vi-process-step > span { color: #ff9a75; font-family: "IBM Plex Mono", monospace; font-size: 8px; }
.vi-process-step h3 { margin-top: 37px; font-family: "IBM Plex Sans Condensed", Arial, sans-serif; font-size: 27px; line-height: 1; }
.vi-process-step p { margin-top: 9px; color: rgba(255,255,255,.55); font-size: 10px; line-height: 1.5; }

.vi-process-action { display: flex; justify-content: center; margin-top: 34px; }

/* Projects */
.vi-project-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: end;
  margin-bottom: 52px;
}

.vi-project-intro h2 {
  font-family: "IBM Plex Sans Condensed", Arial, sans-serif;
  font-size: clamp(48px,5vw,68px);
  letter-spacing: -.045em;
  line-height: .96;
}

.vi-project-intro > div:last-child p { color: var(--v3-muted); font-size: 13px; line-height: 1.65; }
.vi-project-intro > div:last-child small { display: block; margin-top: 13px; color: var(--v3-orange-dark); font-family: "IBM Plex Mono", monospace; font-size: 8px; }

.vi-project-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}

.vi-project-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--v3-line);
  border-radius: 5px;
  background: var(--v3-white);
}

.vi-project-card figure { position: relative; height: 350px; overflow: hidden; background: #d7d1c7; }
.vi-project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--v3-ease); }
.vi-project-card:hover img { transform: scale(1.035); }

.vi-project-status {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 8px;
  border-radius: 2px;
  background: rgba(255,253,248,.94);
  color: var(--v3-orange-dark);
  font-family: "IBM Plex Mono", monospace;
  font-size: 7px;
  letter-spacing: .05em;
}

.vi-project-card-body { padding: 25px; }
.vi-project-card-body > span { color: var(--v3-orange-dark); font-family: "IBM Plex Mono", monospace; font-size: 8px; }
.vi-project-card h3 { margin-top: 17px; font-family: "IBM Plex Sans Condensed", Arial, sans-serif; font-size: 31px; letter-spacing: -.03em; line-height: 1; }
.vi-project-card p { margin-top: 11px; color: var(--v3-muted); font-size: 11px; line-height: 1.55; }

.vi-project-disclaimer {
  max-width: 760px;
  margin: 20px auto 0;
  color: var(--v3-muted);
  font-size: 9px;
  line-height: 1.5;
  text-align: center;
}

.vi-framework-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  margin-top: 50px;
  border-top: 1px solid var(--v3-line);
  border-bottom: 1px solid var(--v3-line);
}

.vi-framework-item {
  min-width: 0;
  min-height: 180px;
  padding: 28px;
  border-right: 1px solid var(--v3-line);
  text-align: center;
}

.vi-framework-item:last-child { border-right: 0; }
.vi-framework-item span { color: var(--v3-orange-dark); font-family: "IBM Plex Mono", monospace; font-size: 8px; }
.vi-framework-item h3 { margin-top: 35px; font-family: "IBM Plex Sans Condensed", Arial, sans-serif; font-size: 25px; line-height: 1; }
.vi-framework-item p { margin-top: 8px; color: var(--v3-muted); font-size: 10px; line-height: 1.5; }

/* Process / legacy URL */
.vi-sequence {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  margin-top: 52px;
}

.vi-sequence article {
  min-width: 0;
  min-height: 310px;
  padding: 30px;
  border: 1px solid var(--v3-line);
  border-top: 4px solid var(--v3-orange);
  border-radius: 4px;
  background: var(--v3-white);
}

.vi-sequence article > span { color: var(--v3-orange-dark); font-family: "IBM Plex Mono", monospace; font-size: 8px; }
.vi-sequence h3 { margin-top: 58px; font-family: "IBM Plex Sans Condensed", Arial, sans-serif; font-size: 36px; letter-spacing: -.03em; line-height: 1; }
.vi-sequence p { margin-top: 12px; color: var(--v3-muted); font-size: 11px; line-height: 1.6; }

.vi-input-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin-top: 45px;
}

.vi-input-grid article { padding: 25px; border: 1px solid rgba(255,255,255,.14); border-radius: 3px; }
.vi-input-grid span { color: #ff9a75; font-family: "IBM Plex Mono", monospace; font-size: 8px; }
.vi-input-grid h3 { margin-top: 28px; font-family: "IBM Plex Sans Condensed", Arial, sans-serif; font-size: 26px; }
.vi-input-grid p { margin-top: 9px; color: rgba(255,255,255,.55); font-size: 10px; line-height: 1.5; }

.vi-scope-band {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 50px;
  align-items: end;
  padding: 58px;
  border-radius: 5px;
  background: var(--v3-paper);
}

.vi-scope-band h2 { margin-top: 15px; font-family: "IBM Plex Sans Condensed", Arial, sans-serif; font-size: clamp(44px,4.5vw,62px); letter-spacing: -.045em; line-height: .96; }
.vi-scope-band p { color: var(--v3-muted); font-size: 13px; line-height: 1.65; }
.vi-scope-band .vi-actions { justify-content: flex-start; }

/* Fast contact */
.vi-contact-hero { padding-bottom: 78px; }

.vi-contact-shell {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  max-width: 1120px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 28px 70px rgba(17,21,18,.1);
}

.vi-contact-aside {
  display: flex;
  flex-direction: column;
  padding: 48px;
  background: var(--v3-ink);
  color: #fff;
}

.vi-contact-aside .v3-eyebrow { color: #ff9a75; }
.vi-contact-aside h2 { margin-top: 24px; font-family: "IBM Plex Sans Condensed", Arial, sans-serif; font-size: 45px; letter-spacing: -.04em; line-height: .96; }
.vi-contact-aside > p { margin-top: 17px; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.6; }

.vi-contact-points { display: grid; gap: 0; margin: 37px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.13); list-style: none; }
.vi-contact-points li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.72); font-size: 10px; }
.vi-contact-points span { color: #ff9a75; font-family: "IBM Plex Mono", monospace; font-size: 8px; }
.vi-contact-aside .v3-button { width: 100%; margin-top: auto; }

.vi-lead-form { padding: 44px; background: var(--v3-white); }
.vi-form-head span { color: var(--v3-orange-dark); font-family: "IBM Plex Mono", monospace; font-size: 8px; letter-spacing: .07em; }
.vi-form-head h2 { margin-top: 12px; font-family: "IBM Plex Sans Condensed", Arial, sans-serif; font-size: 40px; letter-spacing: -.035em; line-height: 1; }
.vi-form-head p { margin-top: 10px; color: var(--v3-muted); font-size: 11px; line-height: 1.55; }

.vi-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 30px;
}

.vi-field { display: grid; gap: 8px; min-width: 0; }
.vi-field--wide { grid-column: 1 / -1; }
.vi-field > span { color: var(--v3-ink); font-size: 10px; font-weight: 700; }
.vi-field > span small { color: var(--v3-muted); font-weight: 400; }

.vi-field input,
.vi-field select,
.vi-field textarea {
  width: 100%;
  border: 1px solid var(--v3-line);
  border-radius: 3px;
  background: var(--v3-paper);
  color: var(--v3-ink);
  font: inherit;
  font-size: 12px;
  outline: 0;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.vi-field input,.vi-field select { min-height: 50px; padding: 0 13px; }
.vi-field textarea { min-height: 110px; padding: 13px; resize: vertical; }
.vi-field input:focus,.vi-field select:focus,.vi-field textarea:focus { border-color: var(--v3-orange); background: var(--v3-white); box-shadow: 0 0 0 3px rgba(240,90,40,.1); }

.vi-form-submit { display: grid; gap: 12px; margin-top: 22px; }
.vi-form-submit .v3-button { width: 100%; }
.vi-form-submit > small,.vi-form-status { color: var(--v3-muted); font-size: 8px; line-height: 1.5; }
.vi-form-status { min-height: 14px; color: var(--v3-orange-dark); }

.vi-form-more {
  margin-top: 18px;
  border: 1px solid var(--v3-line);
  border-radius: 3px;
  background: var(--v3-paper);
}

.vi-form-more summary {
  padding: 14px;
  color: var(--v3-ink);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.vi-form-more[open] summary { border-bottom: 1px solid var(--v3-line); }
.vi-form-more .vi-field { padding: 15px; }

/* Closing CTA */
.vi-closing {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: end;
  padding: 56px 58px;
  border-radius: 5px;
  background: var(--v3-paper);
}

.vi-closing h2 { max-width: 720px; margin-top: 15px; font-family: "IBM Plex Sans Condensed", Arial, sans-serif; font-size: clamp(44px,4.5vw,62px); letter-spacing: -.045em; line-height: .96; }
.vi-closing > div:last-child { display: grid; gap: 10px; width: 265px; }
.vi-closing small { color: var(--v3-muted); font-size: 8px; line-height: 1.5; }

.vi-reference { margin-top: 14px; color: var(--v3-muted); font-size: 8px; text-align: center; }

/* Legacy route bridge */
.vi-bridge { min-height: 76vh; display: grid; place-items: center; padding: 150px 24px 90px; background: var(--v3-paper); }
.vi-bridge-card { max-width: 760px; padding: 58px; border-top: 6px solid var(--v3-orange); border-radius: 5px; background: var(--v3-ink); color: #fff; text-align: center; }
.vi-bridge-card h1 { margin-top: 19px; font-family: "IBM Plex Sans Condensed", Arial, sans-serif; font-size: clamp(48px,6vw,72px); letter-spacing: -.05em; line-height: .94; }
.vi-bridge-card p { max-width: 520px; margin: 18px auto 0; color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.6; }
.vi-bridge-card .vi-actions { margin-top: 27px; }

@media (max-width: 960px) {
  .vi-solution-grid,.vi-project-grid { grid-template-columns: 1fr; max-width: 760px; margin-right: auto; margin-left: auto; }
  .vi-solution-card { display: grid; grid-template-columns: .9fr 1.1fr; }
  .vi-solution-card figure { height: 100%; min-height: 340px; }
  .vi-project-intro { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .vi-project-card { display: grid; grid-template-columns: .9fr 1.1fr; }
  .vi-project-card figure { height: 100%; min-height: 330px; }
  .vi-framework-grid { grid-template-columns: 1fr 1fr; }
  .vi-framework-item:nth-child(2) { border-right: 0; }
  .vi-framework-item:nth-child(-n+2) { border-bottom: 1px solid var(--v3-line); }
  .vi-contact-shell { grid-template-columns: 1fr; max-width: 760px; }
  .vi-contact-aside .v3-button { margin-top: 34px; }
  .vi-closing,.vi-scope-band { grid-template-columns: 1fr; gap: 30px; }
  .vi-closing > div:last-child { width: min(100%,360px); }
}

@media (max-width: 680px) {
  .vi-section { padding: 76px 0; }
  .vi-hero { padding: 112px 0 72px; }
  .vi-hero h1 { font-size: clamp(48px,13.5vw,60px); }
  .vi-hero-copy > p { font-size: 14px; }
  .vi-actions { flex-direction: column; }
  .vi-hero-media { height: 440px; margin-top: 42px; }
  .vi-hero-media img { object-position: 52% center; }
  .vi-media-label { top: 10px; left: 10px; font-size: 7px; }
  .vi-media-note { right: 10px; bottom: 10px; width: calc(100% - 20px); padding: 17px; }
  .vi-media-note strong { font-size: 22px; }
  .vi-heading h2 { font-size: clamp(43px,12vw,54px); }
  .vi-heading > p { font-size: 13px; }
  .vi-solution-grid,.vi-project-grid { margin-top: 38px; }
  .vi-solution-card,.vi-project-card { display: block; }
  .vi-solution-card figure,.vi-project-card figure { height: 270px; min-height: 0; }
  .vi-solution-card-body,.vi-project-card-body { padding: 23px; }
  .vi-solution-card h3 { font-size: 31px; }
  .vi-process-shell { padding: 49px 20px; }
  .vi-process-grid,.vi-sequence,.vi-input-grid { grid-template-columns: 1fr; }
  .vi-process-step { min-height: 150px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .vi-process-step:last-child { border-bottom: 0; }
  .vi-process-step h3 { margin-top: 23px; }
  .vi-project-intro h2 { font-size: 48px; }
  .vi-framework-grid { grid-template-columns: 1fr; }
  .vi-framework-item { min-height: 145px; border-right: 0; border-bottom: 1px solid var(--v3-line); }
  .vi-framework-item:nth-child(2) { border-right: 0; }
  .vi-framework-item:nth-child(-n+2) { border-bottom: 1px solid var(--v3-line); }
  .vi-framework-item:last-child { border-bottom: 0; }
  .vi-framework-item h3 { margin-top: 20px; }
  .vi-sequence article { min-height: 250px; }
  .vi-sequence h3 { margin-top: 35px; }
  .vi-scope-band { padding: 37px 23px; }
  .vi-contact-aside,.vi-lead-form { padding: 34px 22px; }
  .vi-contact-aside h2 { font-size: 39px; }
  .vi-form-grid { grid-template-columns: 1fr; }
  .vi-field--wide { grid-column: auto; }
  .vi-closing { padding: 38px 23px; }
  .vi-closing h2 { font-size: 46px; }
  .vi-bridge-card { padding: 45px 22px; }
}

/* Portfolio — real professional experience */
.portfolio-page main { overflow: clip; }

.portfolio-hero {
  padding: 142px 0 0;
  overflow: hidden;
  background: var(--v3-paper);
}

.portfolio-hero-grid {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: clamp(40px,6vw,90px);
  align-items: center;
  min-height: 650px;
  padding-bottom: 78px;
}

.portfolio-hero-copy h1 {
  max-width: 650px;
  margin-top: 23px;
  font-family: "IBM Plex Sans Condensed", Arial, sans-serif;
  font-size: clamp(62px,6.5vw,95px);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .88;
}

.portfolio-hero-copy h1 em { color: var(--v3-orange); font-style: normal; }
.portfolio-hero-copy > p { max-width: 570px; margin-top: 27px; color: var(--v3-muted); font-size: 16px; line-height: 1.65; }
.portfolio-hero-copy .vi-actions { justify-content: flex-start; }

.portfolio-hero-visual {
  position: relative;
  height: min(620px,58vw);
  min-height: 520px;
  margin: 0;
  overflow: hidden;
  border-radius: 5px;
  background: #d5cfc5;
  box-shadow: 0 35px 90px rgba(17,21,18,.16);
}

.portfolio-hero-visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 44%,rgba(17,21,18,.68));
  content: "";
  pointer-events: none;
}

.portfolio-hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1.1s var(--v3-ease); }
.portfolio-hero-visual:hover img { transform: scale(1.025); }
.portfolio-hero-visual figcaption { position: absolute; z-index: 1; bottom: 23px; left: 24px; color: rgba(255,255,255,.8); font-family: "IBM Plex Mono", monospace; font-size: 8px; letter-spacing: .08em; }

.portfolio-hero-marker {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 9px;
  align-items: flex-end;
  padding: 14px 15px;
  border-top: 4px solid var(--v3-orange);
  border-radius: 3px;
  background: rgba(17,21,18,.92);
  color: #fff;
  backdrop-filter: blur(10px);
}

.portfolio-hero-marker span { font-family: "IBM Plex Sans Condensed", Arial, sans-serif; font-size: 43px; font-weight: 700; letter-spacing: -.05em; line-height: .75; }
.portfolio-hero-marker small { color: #ff9a75; font-family: "IBM Plex Mono", monospace; font-size: 7px; line-height: 1.2; }

.portfolio-signal {
  display: flex;
  min-height: 61px;
  align-items: center;
  justify-content: center;
  gap: clamp(20px,4vw,58px);
  padding: 14px 24px;
  background: var(--v3-orange);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  letter-spacing: .09em;
}

.portfolio-signal i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.65); }

.portfolio-disclosure { border-bottom: 1px solid var(--v3-line); background: var(--v3-white); }
.portfolio-disclosure .vi-container { display: grid; grid-template-columns: 32px 1fr; gap: 15px; align-items: center; max-width: 1060px; padding-top: 25px; padding-bottom: 25px; }
.portfolio-disclosure .vi-container > span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--v3-orange); border-radius: 50%; color: var(--v3-orange-dark); font-family: "IBM Plex Mono", monospace; font-size: 10px; }
.portfolio-disclosure p { color: var(--v3-muted); font-size: 10px; line-height: 1.6; }
.portfolio-disclosure strong { color: var(--v3-ink); }

.portfolio-index { padding: 112px 0; background: var(--v3-white); }

.portfolio-heading {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 60px;
  align-items: end;
}

.portfolio-heading h2 { margin-top: 15px; font-family: "IBM Plex Sans Condensed", Arial, sans-serif; font-size: clamp(54px,6vw,80px); letter-spacing: -.055em; line-height: .89; }
.portfolio-heading > p { max-width: 510px; color: var(--v3-muted); font-size: 13px; line-height: 1.7; }

.portfolio-toolbar {
  position: sticky;
  z-index: 8;
  top: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 50px 0 25px;
  padding: 12px;
  border: 1px solid var(--v3-line);
  border-radius: 4px;
  background: rgba(255,253,248,.93);
  box-shadow: 0 12px 30px rgba(17,21,18,.05);
  backdrop-filter: blur(16px);
}

.portfolio-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.portfolio-filters button {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--v3-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s ease,background .2s ease,color .2s ease;
}

.portfolio-filters button span { color: var(--v3-orange-dark); font-family: "IBM Plex Mono", monospace; font-size: 7px; }
.portfolio-filters button:hover { border-color: var(--v3-line); color: var(--v3-ink); }
.portfolio-filters button.is-active { border-color: var(--v3-ink); background: var(--v3-ink); color: #fff; }
.portfolio-filters button.is-active span { color: #ff9a75; }
.portfolio-filters button:focus-visible,.portfolio-card-action:focus-visible,.portfolio-dialog-close:focus-visible { outline: 3px solid rgba(240,90,40,.35); outline-offset: 3px; }
.portfolio-count { flex: 0 0 auto; margin-right: 10px; color: var(--v3-muted); font-family: "IBM Plex Mono", monospace; font-size: 8px; }

.portfolio-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.portfolio-card[hidden] { display: none; }
.portfolio-card { min-width: 0; overflow: hidden; border: 1px solid var(--v3-line); border-radius: 5px; background: var(--v3-paper); transition: transform .38s var(--v3-ease),box-shadow .38s ease,border-color .25s ease; }
.portfolio-card:hover { transform: translateY(-6px); border-color: rgba(240,90,40,.45); box-shadow: 0 24px 60px rgba(17,21,18,.1); }
.portfolio-card--wide { grid-column: 1 / -1; }
.portfolio-card-action { display: flex; width: 100%; min-height: 100%; flex-direction: column; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.portfolio-card--wide .portfolio-card-action { display: grid; grid-template-columns: 1.2fr .8fr; min-height: 410px; }

.portfolio-card figure { position: relative; min-height: 360px; margin: 0; overflow: hidden; background: #e8e3d9; }
.portfolio-card--wide figure { min-height: 410px; }
.portfolio-card:not(.portfolio-card--wide) figure { height: 390px; min-height: 390px; flex: 0 0 390px; }
.portfolio-card figure::after { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(17,21,18,.02),transparent 60%,rgba(17,21,18,.22)); content: ""; pointer-events: none; }
.portfolio-card figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: multiply; transition: transform .7s var(--v3-ease),filter .35s ease; }
.portfolio-card figure img.is-contain { padding: 26px; object-fit: contain; }
.portfolio-card:hover figure img { transform: scale(1.025); filter: saturate(1.08); }
.portfolio-card-index,.portfolio-card-sector { position: absolute; z-index: 2; top: 13px; padding: 7px 8px; border-radius: 2px; font-family: "IBM Plex Mono", monospace; font-size: 7px; letter-spacing: .07em; }
.portfolio-card-index { left: 13px; background: rgba(17,21,18,.9); color: #fff; }
.portfolio-card-sector { right: 13px; background: rgba(255,253,248,.93); color: var(--v3-orange-dark); }

.portfolio-card-body { display: flex; min-width: 0; flex: 1; flex-direction: column; padding: 30px; background: var(--v3-white); }
.portfolio-card:not(.portfolio-card--wide) .portfolio-card-body { min-height: 270px; }
.portfolio-card--wide .portfolio-card-body { justify-content: center; padding: clamp(35px,5vw,70px); }
.portfolio-card-kicker { color: var(--v3-orange-dark); font-family: "IBM Plex Mono", monospace; font-size: 8px; letter-spacing: .06em; }
.portfolio-card h3 { max-width: 600px; margin-top: 20px; font-family: "IBM Plex Sans Condensed", Arial, sans-serif; font-size: clamp(32px,3.2vw,49px); letter-spacing: -.04em; line-height: .96; }
.portfolio-card:not(.portfolio-card--wide) h3 { font-size: clamp(31px,3vw,40px); }
.portfolio-card-body > p { margin-top: 15px; color: var(--v3-muted); font-size: 10px; line-height: 1.45; }
.portfolio-card-link { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: auto; padding-top: 34px; color: var(--v3-ink); font-size: 9px; font-weight: 700; }
.portfolio-card-link b { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: var(--v3-orange); color: #fff; font-size: 13px; transition: transform .3s var(--v3-ease); }
.portfolio-card:hover .portfolio-card-link b { transform: rotate(45deg); }
.portfolio-source-note { max-width: 820px; margin: 24px auto 0; color: var(--v3-muted); font-size: 8px; line-height: 1.6; text-align: center; }

.portfolio-method { padding: 110px 0; background: var(--v3-ink); color: #fff; }
.portfolio-method-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: end; }
.portfolio-method-intro .v3-eyebrow { grid-column: 1 / -1; color: #ff9a75; }
.portfolio-method-intro h2 { max-width: 650px; font-family: "IBM Plex Sans Condensed", Arial, sans-serif; font-size: clamp(52px,6vw,78px); letter-spacing: -.055em; line-height: .9; }
.portfolio-method-intro p { max-width: 530px; color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.7; }
.portfolio-method-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 60px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.15); list-style: none; }
.portfolio-method-grid li { min-height: 230px; padding: 28px; border-right: 1px solid rgba(255,255,255,.15); }
.portfolio-method-grid li:last-child { border-right: 0; }
.portfolio-method-grid span { color: #ff9a75; font-family: "IBM Plex Mono", monospace; font-size: 8px; }
.portfolio-method-grid h3 { margin-top: 58px; font-family: "IBM Plex Sans Condensed", Arial, sans-serif; font-size: 31px; }
.portfolio-method-grid p { margin-top: 10px; color: rgba(255,255,255,.55); font-size: 10px; line-height: 1.55; }

body.dialog-open { overflow: hidden; }
.portfolio-dialog { width: min(1180px,calc(100% - 40px)); max-width: none; max-height: min(900px,calc(100vh - 40px)); margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: 6px; background: var(--v3-white); color: var(--v3-ink); box-shadow: 0 40px 120px rgba(0,0,0,.35); }
.portfolio-dialog::backdrop { background: rgba(8,10,9,.78); backdrop-filter: blur(8px); }
.portfolio-dialog-shell { display: grid; width: 100%; min-width: 0; grid-template-columns: .82fr 1.18fr; min-height: min(820px,calc(100vh - 40px)); max-height: min(900px,calc(100vh - 40px)); }
.portfolio-dialog-close { position: absolute; z-index: 5; top: 14px; right: 14px; display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 50%; background: var(--v3-ink); color: #fff; font: inherit; font-size: 25px; cursor: pointer; }
.portfolio-dialog-media { position: relative; min-height: 100%; overflow: hidden; background: #e7e1d7; }
.portfolio-dialog-media::after { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 58%,rgba(17,21,18,.25)); content: ""; pointer-events: none; }
.portfolio-dialog-media img { width: 100%; height: 100%; padding: clamp(20px,4vw,50px); object-fit: contain; mix-blend-mode: multiply; }
.portfolio-dialog-media > span { position: absolute; z-index: 1; top: 20px; left: 20px; padding: 8px 10px; border-radius: 2px; background: var(--v3-orange); color: #fff; font-family: "IBM Plex Mono", monospace; font-size: 8px; letter-spacing: .08em; }
.portfolio-dialog-content { min-width: 0; overflow-y: auto; padding: clamp(45px,5vw,72px); }
.portfolio-dialog-heading > span { color: var(--v3-orange-dark); font-family: "IBM Plex Mono", monospace; font-size: 8px; letter-spacing: .07em; }
.portfolio-dialog-heading h2 { max-width: 640px; margin-top: 13px; font-family: "IBM Plex Sans Condensed", Arial, sans-serif; font-size: clamp(45px,5vw,68px); letter-spacing: -.05em; line-height: .92; }
.portfolio-dialog-heading p { max-width: 650px; margin-top: 18px; overflow-wrap: anywhere; color: var(--v3-muted); font-size: 13px; line-height: 1.6; }
.portfolio-dialog-facts { display: grid; min-width: 0; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 31px; border-top: 1px solid var(--v3-line); border-left: 1px solid var(--v3-line); }
.portfolio-dialog-facts > div { display: grid; min-width: 0; gap: 8px; min-height: 84px; padding: 17px; border-right: 1px solid var(--v3-line); border-bottom: 1px solid var(--v3-line); }
.portfolio-dialog-facts small { color: var(--v3-muted); font-family: "IBM Plex Mono", monospace; font-size: 7px; text-transform: uppercase; }
.portfolio-dialog-facts strong { overflow-wrap: anywhere; font-size: 10px; line-height: 1.4; }
.portfolio-dialog-story { display: grid; gap: 0; margin-top: 35px; border-top: 1px solid var(--v3-line); }
.portfolio-dialog-story section { display: grid; min-width: 0; grid-template-columns: 150px minmax(0,1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--v3-line); }
.portfolio-dialog-story span { color: var(--v3-orange-dark); font-family: "IBM Plex Mono", monospace; font-size: 7px; line-height: 1.5; }
.portfolio-dialog-story p { color: var(--v3-muted); font-size: 11px; line-height: 1.65; }
.portfolio-dialog-disclosure { margin-top: 25px; padding: 18px; border-left: 3px solid var(--v3-orange); background: var(--v3-paper); }
.portfolio-dialog-disclosure strong { font-size: 9px; }
.portfolio-dialog-disclosure p { margin-top: 6px; color: var(--v3-muted); font-size: 9px; line-height: 1.55; }
.portfolio-dialog-cta { width: 100%; margin-top: 22px; }

@media (max-width: 960px) {
  .portfolio-hero-grid { grid-template-columns: 1fr; padding-bottom: 60px; }
  .portfolio-hero-copy { max-width: 760px; text-align: center; }
  .portfolio-hero-copy h1,.portfolio-hero-copy > p { margin-right: auto; margin-left: auto; }
  .portfolio-hero-copy .vi-actions { justify-content: center; }
  .portfolio-hero-visual { height: 620px; min-height: 0; }
  .portfolio-heading,.portfolio-method-intro { grid-template-columns: 1fr; gap: 25px; }
  .portfolio-method-intro .v3-eyebrow { grid-column: auto; }
  .portfolio-dialog-shell { grid-template-columns: 1fr; overflow-y: auto; }
  .portfolio-dialog-media { min-height: 360px; }
  .portfolio-dialog-content { overflow: visible; }
}

@media (max-width: 740px) {
  .portfolio-hero { padding-top: 112px; }
  .portfolio-hero-grid { min-height: 0; gap: 42px; }
  .portfolio-hero-copy h1 { font-size: clamp(55px,15vw,72px); }
  .portfolio-hero-copy > p { font-size: 14px; }
  .portfolio-hero-visual { height: 480px; }
  .portfolio-signal { justify-content: flex-start; overflow-x: auto; white-space: nowrap; }
  .portfolio-signal span,.portfolio-signal i { flex: 0 0 auto; }
  .portfolio-disclosure .vi-container { align-items: start; }
  .portfolio-index,.portfolio-method { padding: 78px 0; }
  .portfolio-heading h2 { font-size: 53px; }
  .portfolio-toolbar { position: static; display: block; margin-top: 38px; }
  .portfolio-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .portfolio-filters button { justify-content: space-between; }
  .portfolio-count { margin: 13px 4px 2px; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-card--wide { grid-column: auto; }
  .portfolio-card--wide .portfolio-card-action,.portfolio-card-action { display: block; }
  .portfolio-card figure,.portfolio-card--wide figure,.portfolio-card:not(.portfolio-card--wide) figure { min-height: 285px; height: 285px; flex-basis: 285px; }
  .portfolio-card-body,.portfolio-card--wide .portfolio-card-body { min-height: 300px; padding: 25px; }
  .portfolio-card h3,.portfolio-card:not(.portfolio-card--wide) h3 { font-size: 35px; }
  .portfolio-method-grid { grid-template-columns: 1fr 1fr; }
  .portfolio-method-grid li { min-height: 190px; border-bottom: 1px solid rgba(255,255,255,.15); }
  .portfolio-method-grid li:nth-child(2) { border-right: 0; }
  .portfolio-method-grid h3 { margin-top: 35px; }
  .portfolio-dialog { width: calc(100% - 14px); max-height: calc(100vh - 14px); }
  .portfolio-dialog-shell { max-height: calc(100vh - 14px); }
  .portfolio-dialog-media { min-height: 280px; }
  .portfolio-dialog-content { padding: 34px 21px; }
  .portfolio-dialog-heading h2 { padding-right: 30px; font-size: 46px; }
  .portfolio-dialog-story section { grid-template-columns: 1fr; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-card,.portfolio-card figure img,.portfolio-card-link b,.portfolio-hero-visual img { transition: none; }
}

/* Legal pages */
.legal-page main { background: var(--v3-white); }
.legal-hero { padding: 165px 0 85px; background: var(--v3-paper); }
.legal-hero .vi-container { max-width: 1060px; }
.legal-hero h1 { max-width: 900px; margin-top: 22px; font-family: "IBM Plex Sans Condensed", Arial, sans-serif; font-size: clamp(65px,8vw,108px); letter-spacing: -.06em; line-height: .88; }
.legal-hero h1 em { color: var(--v3-orange); font-style: normal; }
.legal-hero p { max-width: 680px; margin-top: 25px; color: var(--v3-muted); font-size: 15px; line-height: 1.65; }

.legal-layout { display: grid; grid-template-columns: 250px minmax(0,720px); gap: clamp(55px,8vw,110px); justify-content: center; padding-top: 85px; padding-bottom: 115px; }
.legal-nav { position: sticky; top: 110px; display: flex; height: fit-content; flex-direction: column; padding: 22px; border-top: 4px solid var(--v3-orange); border-radius: 3px; background: var(--v3-paper); }
.legal-nav strong { margin-bottom: 14px; color: var(--v3-orange-dark); font-family: "IBM Plex Mono", monospace; font-size: 8px; letter-spacing: .07em; }
.legal-nav a { padding: 9px 0; border-bottom: 1px solid var(--v3-line); color: var(--v3-muted); font-size: 9px; transition: color .2s ease,transform .2s ease; }
.legal-nav a:hover { color: var(--v3-ink); transform: translateX(3px); }
.legal-nav .legal-back { margin-top: 16px; border: 0; color: var(--v3-orange-dark); font-weight: 700; }
.legal-content { min-width: 0; }
.legal-content > section { padding: 48px 0; border-bottom: 1px solid var(--v3-line); scroll-margin-top: 115px; }
.legal-content > section > span { color: var(--v3-orange-dark); font-family: "IBM Plex Mono", monospace; font-size: 8px; }
.legal-content h2 { max-width: 650px; margin-top: 13px; font-family: "IBM Plex Sans Condensed", Arial, sans-serif; font-size: clamp(35px,4vw,46px); letter-spacing: -.035em; line-height: .98; }
.legal-content p,.legal-content li { color: var(--v3-muted); font-size: 11px; line-height: 1.75; }
.legal-content h2 + p,.legal-content p + p,.legal-content p + ul,.legal-content ul + p,.legal-content dl { margin-top: 18px; }
.legal-content ul { display: grid; gap: 8px; padding-left: 20px; }
.legal-content a { color: var(--v3-orange-dark); text-decoration: underline; text-underline-offset: 3px; }
.legal-content dl { display: grid; border-top: 1px solid var(--v3-line); }
.legal-content dl > div { display: grid; grid-template-columns: 160px 1fr; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--v3-line); }
.legal-content dt { color: var(--v3-ink); font-size: 9px; font-weight: 700; }
.legal-content dd { margin: 0; color: var(--v3-muted); font-size: 10px; }
.legal-pending { padding: 20px 22px; border: 1px solid rgba(240,90,40,.35); border-left: 4px solid var(--v3-orange); border-radius: 3px; background: #fff3ed; }
.legal-pending strong { color: var(--v3-ink); font-size: 10px; }
.legal-pending p { margin-top: 5px; color: #72584e; font-size: 9px; line-height: 1.55; }
.legal-note { margin-top: 38px; padding: 20px; border-radius: 3px; background: var(--v3-ink); color: rgba(255,255,255,.65) !important; font-size: 9px !important; }

.vi-consent {
  display: grid;
  grid-template-columns: 19px 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 20px;
  padding: 15px;
  border: 1px solid var(--v3-line);
  border-radius: 3px;
  background: var(--v3-paper);
  color: var(--v3-muted);
  font-size: 9px;
  line-height: 1.55;
  cursor: pointer;
}
.vi-consent input { width: 17px; height: 17px; margin: 0; accent-color: var(--v3-orange); }
.vi-consent a { color: var(--v3-orange-dark); text-decoration: underline; text-underline-offset: 2px; }
.vi-case-reference { display: none; margin: 0 0 18px; padding: 13px 15px; border-left: 3px solid var(--v3-orange); background: #fff3ed; color: var(--v3-ink); font-size: 9px; line-height: 1.5; }
.vi-case-reference.is-visible { display: block; }

@media (max-width: 800px) {
  .legal-layout { grid-template-columns: 1fr; gap: 35px; }
  .legal-nav { position: static; }
}

@media (max-width: 680px) {
  .legal-hero { padding: 125px 0 65px; }
  .legal-hero h1 { font-size: 62px; }
  .legal-layout { padding-top: 55px; padding-bottom: 80px; }
  .legal-content > section { padding: 37px 0; }
  .legal-content dl > div { grid-template-columns: 1fr; gap: 7px; }
}
