body.site-portfolio-page { background: #f3eee4; }

.portfolio-hero {
  min-height: 76vh; display: grid; align-items: end; position: relative; overflow: hidden;
  padding: clamp(92px, 12vw, 170px) 0 clamp(68px, 9vw, 118px); color: #f7f3ea;
  background: #192018;
}
.portfolio-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(17,22,16,.94) 0%, rgba(17,22,16,.8) 42%, rgba(17,22,16,.18) 76%),
    url("/assets/site-redesign/ridge-and-pine.webp") center/cover;
}
.portfolio-hero .shell { position: relative; z-index: 1; }
.portfolio-hero .eyebrow { color: #d5c7a9; }
.portfolio-hero h1 { max-width: 9ch; font-size: clamp(56px, 8.4vw, 118px); line-height: .88; letter-spacing: -.045em; }
.portfolio-hero h1 em { display: block; color: #d5ac67; font-weight: 350; }
.portfolio-hero-copy { max-width: 560px; margin: 32px 0 0; color: #d8ddd2; font-size: clamp(18px, 1.5vw, 21px); }
.portfolio-hero-note { margin: 30px 0 0; color: #aeb7a7; font: 400 11px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; }

.portfolio-intro { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(36px, 8vw, 120px); align-items: start; }
.portfolio-intro h2 { max-width: 9ch; }
.portfolio-intro-copy { margin: 0; color: var(--ink-soft); font-size: clamp(18px, 1.7vw, 22px); }
.portfolio-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.portfolio-principles div { padding-top: 16px; border-top: 1px solid var(--line); }
.portfolio-principles strong { display: block; font: 500 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.portfolio-principles span { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; }

.concept { padding: clamp(76px, 10vw, 132px) 0; }
.concept-dark { background: #171b15; color: #f0ede5; }
.concept-light { background: #e7dfd1; color: var(--ink); }
.concept-head { display: grid; grid-template-columns: minmax(0,.8fr) minmax(300px,1.2fr); gap: clamp(30px, 7vw, 96px); align-items: end; margin-bottom: 46px; }
.concept-tag { margin: 0 0 14px; color: #caa65f; font: 500 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.concept-head h2 { max-width: 10ch; }
.concept-head > p { margin: 0; color: #bdc3b8; font-size: 17px; max-width: 56ch; }
.concept-light .concept-head > p { color: #665f53; }

.concept-comparison { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: clamp(18px, 3vw, 34px); align-items: start; }
.concept-browser { overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 34px 80px -38px rgba(0,0,0,.62); }
.browser-bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 13px; background: #dad8d4; }
.browser-bar span { width: 7px; height: 7px; border-radius: 50%; background: #aaa7a1; }
.browser-bar small { margin-left: 7px; color: #77736d; font: 400 8px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.concept-label { margin: 12px 2px 0; color: #91988e; font: 500 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.concept-light .concept-label { color: #756d60; }

.before-site { min-height: 480px; padding: 19px 22px 28px; color: #383838; background: #f6f6f3; font-family: Arial, sans-serif; }
.before-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 0 2px 14px; color: #666; font-size: 9px; }
.before-nav strong { color: #333; font: 700 12px/1 Arial, sans-serif; }
.before-image { width: 100%; height: 205px; object-fit: cover; }
.before-site h3 { margin: 24px 0 8px; font: 700 27px/1.08 Arial, sans-serif; color: #303030; }
.before-site p { margin: 0; color: #707070; font-size: 12px; line-height: 1.55; }
.before-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.before-actions span { padding: 9px 12px; background: #4d5e50; color: white; font-size: 9px; }
.before-actions span:last-child { background: #b98a3e; }

.after-site { min-height: 610px; position: relative; display: flex; flex-direction: column; color: #fff; background-position: center; background-size: cover; }
.after-site::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,13,9,.72), rgba(8,13,9,.05) 38%, rgba(8,13,9,.8)); }
.after-nav, .after-copy, .after-proof { position: relative; z-index: 1; }
.after-nav { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 26px; border-bottom: 1px solid rgba(255,255,255,.22); }
.after-brand { font: 500 17px/1 var(--display); letter-spacing: -.02em; }
.after-links { display: flex; gap: 19px; align-items: center; font: 500 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.after-links span:last-child { padding: 10px 14px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; }
.after-copy { margin-top: auto; padding: 34px 34px 26px; }
.after-copy small { color: #e1c993; font: 500 9px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.after-copy h3 { max-width: 9ch; margin: 12px 0 18px; font: 400 clamp(38px, 4.2vw, 62px)/.92 var(--display); letter-spacing: -.035em; }
.after-copy p { max-width: 45ch; margin: 0; color: #e4e5df; font-size: 12px; }
.after-cta { display: inline-flex; margin-top: 22px; padding: 12px 17px; border-radius: 999px; background: #f2eadb; color: #191d17; font: 600 9px/1 var(--sans); }
.after-proof { display: flex; gap: 22px; padding: 15px 34px; border-top: 1px solid rgba(255,255,255,.22); background: rgba(12,16,11,.48); color: #d8dbd2; font: 500 8px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.ridge-after { background-image: url("/assets/site-redesign/ridge-and-pine.webp"); }

.drift-before { background: #fff; }
.drift-before .before-nav strong { font-family: Georgia, serif; font-size: 14px; color: #42626a; }
.drift-before .before-image { height: 192px; object-position: center; }
.drift-before h3 { color: #36535a; font-family: Georgia, serif; font-weight: 400; }
.drift-before .before-actions span { background: #6e8f96; }
.drift-after { background-image: url("/assets/site-redesign/driftwood-house.webp"); background-position: center; color: #13272b; }
.drift-after::before { background: linear-gradient(90deg, rgba(239,244,241,.98) 0%, rgba(239,244,241,.82) 42%, rgba(239,244,241,.04) 72%); }
.drift-after .after-nav { border-bottom-color: rgba(19,39,43,.2); }
.drift-after .after-links span:last-child { border-color: rgba(19,39,43,.58); }
.drift-after .after-copy { max-width: 56%; margin-top: auto; margin-bottom: auto; }
.drift-after .after-copy small { color: #55767c; }
.drift-after .after-copy p { color: #3b565b; }
.drift-after .after-cta { background: #17343a; color: #f4f1e8; }
.drift-after .after-proof { color: #345158; border-top-color: rgba(19,39,43,.18); background: rgba(238,244,241,.78); }

.portfolio-bridge { background: var(--dossier-sand); }
.portfolio-bridge-grid { display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: end; }
.portfolio-bridge h2 { max-width: 12ch; }
.portfolio-bridge p { max-width: 58ch; color: var(--muted); }

@media (max-width: 860px) {
  .portfolio-intro, .concept-head, .concept-comparison { grid-template-columns: 1fr; }
  .concept-comparison { gap: 42px; }
  .portfolio-bridge-grid { grid-template-columns: 1fr; align-items: start; }
  .after-site { min-height: 560px; }
}

@media (max-width: 580px) {
  .portfolio-hero { min-height: 70vh; }
  .portfolio-hero::before { background: linear-gradient(180deg, rgba(17,22,16,.66), rgba(17,22,16,.92)), url("/assets/site-redesign/ridge-and-pine.webp") 63% center/cover; }
  .portfolio-principles { grid-template-columns: 1fr; }
  .concept-browser { border-radius: 7px; }
  .before-site { min-height: 420px; padding: 15px; }
  .before-image { height: 175px; }
  .after-site { min-height: 510px; }
  .after-nav { padding: 18px; }
  .after-links span:not(:last-child) { display: none; }
  .after-copy { padding: 28px 22px 22px; }
  .after-proof { padding: 13px 22px; gap: 12px; flex-wrap: wrap; }
  .drift-after::before { background: linear-gradient(180deg, rgba(239,244,241,.28), rgba(239,244,241,.96) 58%); }
  .drift-after .after-copy { max-width: none; margin-top: auto; margin-bottom: 0; }
}