/* Portland Properties interim site — no frameworks, scripts, PHP or remote assets. */
:root {
  color-scheme: light;
  --ink: #15303b;
  --deep: #112b36;
  --deep-two: #193e4c;
  --cream: #f6f4ef;
  --paper: #fffdfa;
  --line: #d6d7d0;
  --accent: #c5ac86;
  --text: #293840;
  --muted: #5c6b6d;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
*,*::before,*::after {box-sizing: border-box}
html {scroll-behavior: smooth; scroll-padding-top: 6rem}
body {margin:0; color:var(--text); background:var(--paper); font-family:var(--sans); -webkit-font-smoothing:antialiased}
a {color:inherit}
a:focus-visible {outline:3px solid var(--accent); outline-offset:5px}
img {display:block; max-width:100%}
.container {width:min(100% - 8vw, 1380px); margin-inline:auto}
.skip-link {position:absolute; z-index:100; top:-10rem; left:1rem; background:white; padding:.8rem 1rem; color:#111}
.skip-link:focus {top:1rem}
.site-header {position:absolute; z-index:5; top:0; right:0; left:0; border-bottom:1px solid rgba(255,255,255,.27)}
.header-inner {height:112px; display:flex; align-items:center; justify-content:space-between; gap:2rem}
.brand {display:block; width:190px; flex-shrink:0}
.brand img {width:100%; height:auto}
.primary-nav {display:flex; align-items:center; gap:clamp(1.2rem,2.65vw,3rem); font-size:.79rem; letter-spacing:.105em; text-transform:uppercase; font-weight:600; color:white}
.primary-nav a {text-decoration:none; opacity:.92; transition:opacity .2s ease}
.primary-nav a:hover {opacity:.65}
.primary-nav .nav-contact {border:1px solid rgba(255,255,255,.65); padding:1rem 1.2rem}
.primary-nav .nav-contact span {margin-left:.7rem; font-size:1rem}
.hero {position:relative; overflow:hidden; color:white; min-height:710px; height:min(900px, 100svh); display:flex; align-items:flex-end; isolation:isolate; background:var(--deep)}
.hero-image {position:absolute; z-index:-2; inset:0; background-image:url('assets/portland-skyline.webp'); background-size:cover; background-position:center 59%; transform:scale(1.015)}
.hero::before {content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(10,32,43,.48) 0%,rgba(13,35,47,.14) 26%,rgba(11,31,42,.16) 45%,rgba(5,25,34,.81) 100%)}
.hero-content {padding-top:180px; padding-bottom:91px}
.hero-panel {display:inline-block; max-width:min(980px, 100%); padding:34px 42px 34px 0}
.eyebrow {margin:0; font-size:.7rem; font-weight:700; letter-spacing:.205em; line-height:1.6}
.hero-kicker {display:flex; align-items:center; gap:1rem; color:rgba(255,255,255,.91)}
.fine-line {width:32px; height:1px; background:var(--accent); display:inline-block}
h1,h2,h3,p {margin-top:0}
h1,h2 {font-family:var(--serif); font-weight:400; letter-spacing:-.042em}
h1 em,h2 em {font-weight:400}
h1 {font-size:clamp(5rem, 9.2vw, 10rem); line-height:.96; margin:26px 0 42px; max-width:1050px; text-wrap:balance}
.hero-bottom {display:flex; justify-content:space-between; align-items:end; max-width:925px; gap:3rem}
.hero-bottom p {max-width:510px; font-size:clamp(1rem,1.6vw,1.32rem); line-height:1.75; color:rgba(255,255,255,.92); margin-bottom:0}
.circle-link {border:1px solid rgba(255,255,255,.8); width:58px; height:58px; border-radius:50%; display:grid; place-items:center; font-size:1.8rem; text-decoration:none; flex-shrink:0}
.circle-link:hover {background:rgba(255,255,255,.18)}
.hero-photo-label {position:absolute; right:4vw; bottom:2.4rem; color:#fff; opacity:.67; font-size:.62rem; letter-spacing:.18em; writing-mode:vertical-rl}
.hero-photo-label span {margin:.65rem 0}
.section-pad {padding:clamp(90px,10vw,155px) 0}
.intro {background:var(--cream)}
.intro-grid {display:grid; grid-template-columns: 1.05fr 1fr; column-gap:clamp(3rem,11vw,175px)}
.dark-eyebrow {color:#667c80}
h2 {font-size:clamp(3.5rem,6.25vw,7.2rem); line-height:1.055; margin:26px 0 0; color:var(--ink)}
.intro-right {padding-top:62px}
.intro-right .lead {font-family:var(--serif); font-size:clamp(1.35rem,2vw,1.8rem); line-height:1.53; color:var(--ink); margin-bottom:30px}
.intro-right > p:not(.lead) {color:#59666a; font-size:1rem; line-height:1.85; margin-bottom:24px; max-width:590px}
.text-link {display:inline-flex; gap:2rem; padding:.95rem 0; margin-top:6px; border-bottom:1px solid var(--ink); font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-decoration:none}
.text-link span {font-size:1rem}
.work {background:var(--deep); color:#fff}
.light-eyebrow {color:var(--accent)}
.work h2 {color:#fff}
.work-heading-row {display:grid; grid-template-columns: 1.1fr .7fr; align-items:end; gap:4rem; margin-bottom:76px}
.work-heading-row > p {font-size:1.07rem; line-height:1.86; color:#c3d0d1; max-width:460px; margin:0 0 6px auto}
.service-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid rgba(255,255,255,.24); border-bottom:1px solid rgba(255,255,255,.24)}
.service-card {min-height:260px; display:flex; flex-direction:column; justify-content:space-between; padding:28px clamp(20px,3vw,44px) 32px; border-right:1px solid rgba(255,255,255,.24); position:relative}
.service-card:first-child {padding-left:0}
.service-card:last-child {border-right:0}
.service-number {font-size:.76rem; letter-spacing:.15em; color:var(--accent)}
.service-card h3 {font-family:var(--serif); font-size:clamp(1.45rem,2vw,2rem); font-weight:400; margin-bottom:13px; line-height:1.2}
.service-card p:not(.service-number) {font-size:.91rem; line-height:1.7; color:#b9c8c9; max-width:310px; margin:0}
.service-symbol {position:absolute; right:34px; top:28px; color:#98b5ba; font-size:1.2rem}
.portfolio-note {margin:34px 0 0; color:#c5d1d1; font-size:.9rem}
.portfolio-note a {color:#fff; text-decoration-color:var(--accent); text-underline-offset:5px}
.tenants {background:#e9e8e1}
.tenants-grid {display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,9vw,140px); align-items:center}
.tenants-intro {font-size:1rem; line-height:1.85; max-width:460px; margin:32px 0 0; color:#536163}
.tenant-contact-card {background:#f9f8f4; border:1px solid #d5d7d0; padding:clamp(35px,5vw,75px); min-height:350px; display:flex; flex-direction:column; align-items:flex-start}
.tenant-resource-list {display:flex; flex-direction:column; gap:14px; width:100%; margin:4px 0 0}
.tenant-resource-link {display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; color:var(--ink); text-decoration:none; border-bottom:1px solid #cfd5d3; padding:0 0 14px; font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.45}
.tenant-resource-link span {font-size:.95rem; flex-shrink:0}
.small-heading,.detail-label {font-size:.7rem; letter-spacing:.17em; font-weight:700; color:#64757a}
.tenant-card-title {font-family:var(--serif); font-size:clamp(1.8rem,2.8vw,3rem); line-height:1.2; color:var(--ink); margin:34px 0 25px}
.tenant-phone {color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:10px; font-size:clamp(1.25rem,2.3vw,2.1rem); white-space:nowrap}
.tenant-phone span {font-size:1rem; margin-left:.35rem}
.tenant-caption {font-size:.88rem; line-height:1.7; color:#657175; max-width:330px; margin:24px 0 0}
.contact {background:var(--paper)}
.contact-grid {display:grid; grid-template-columns:1.15fr .75fr; gap:6rem}
.contact h2 {font-size:clamp(3.4rem,6vw,6.5rem)}
.contact-grid > div:first-child > p:last-child {max-width:510px; margin:32px 0 0; color:#667074; line-height:1.85}
.contact-details {padding-top:65px}
.detail-group {border-bottom:1px solid #d1d6d4; padding:0 0 36px; margin-bottom:38px}
.detail-group:last-child {border-bottom:0; margin-bottom:0}
.detail-label {display:block; margin-bottom:20px}
.big-link,.address-link {color:var(--ink); text-decoration:none; font-family:var(--serif); line-height:1.35}
.big-link {font-size:clamp(1.65rem,3vw,2.6rem); white-space:nowrap}
.address-link {font-size:clamp(1.6rem,2.8vw,2.4rem); display:inline-block}
.big-link span,.address-link span {font-family:var(--sans); font-size:.85rem; margin-left:.7rem; vertical-align:middle}
.site-footer {background:#0d2630; color:#d2dddc; padding:55px 0 34px}
.footer-top {display:flex; align-items:center; justify-content:space-between; gap:30px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.15)}
.footer-brand {display:block; width:190px}
.footer-brand img {width:100%; height:auto}
.footer-top > p {font-family:var(--serif); font-size:1.7rem; font-style:italic; margin:0; color:#f1f0eb}
.footer-bottom {padding-top:25px; display:grid; grid-template-columns:1fr 1.7fr; gap:30px; align-items:start}
.footer-bottom p {margin:0; font-size:.72rem; line-height:1.7; color:#a9bec0}
.footer-bottom .photo-credit {max-width:670px; justify-self:end}
@media (min-width:901px) {
  .hero-panel {background:linear-gradient(135deg, rgba(7,24,33,.60), rgba(8,24,33,.34)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-radius:8px; box-shadow:0 18px 40px rgba(0,0,0,.16)}
}
.footer-bottom a {text-underline-offset:3px; color:#dce5e2}
@media (max-width:900px) {
  .container {width:min(100% - 9vw,1380px)}
  .header-inner {height:100px}
  .brand {width:160px}
  .primary-nav {gap:1rem; font-size:.66rem}
  .primary-nav .nav-contact {padding:.8rem}
  .hero {min-height:650px; height:86svh}
  .hero-content {padding-bottom:75px}
  .hero-panel {padding:22px 24px 24px 0; max-width:100%}
  .intro-grid,.tenants-grid,.contact-grid {grid-template-columns:1fr; gap:35px}
  .intro-right,.contact-details {padding-top:0}
  .work-heading-row {grid-template-columns:1fr; gap:24px}
  .work-heading-row > p {margin:0; max-width:660px}
  .service-card {padding:24px}
  .service-card:first-child {padding-left:0}
  .service-symbol {right:15px}
  .tenant-contact-card {min-height:0}
}
@media (max-width:620px) {
  .container {width:calc(100% - 42px)}
  .site-header {background:rgba(13,38,48,.22)}
  .header-inner {height:82px}
  .brand {width:135px}
  .primary-nav {gap:0}
  .primary-nav > a:not(.nav-contact) {display:none}
  .primary-nav .nav-contact {padding:.67rem .8rem; font-size:.69rem}
  .primary-nav .nav-contact span {margin-left:.3rem}
  .hero {min-height:630px; height:91svh; max-height:850px}
  .hero-image {background-position:50% center}
  .hero::before {background:linear-gradient(180deg,rgba(10,32,43,.5),rgba(11,31,42,.06) 27%,rgba(5,25,34,.85) 100%)}
  .hero-content {padding-top:150px; padding-bottom:75px}
  .hero-panel {padding:18px 18px 18px 0; background:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important}
  h1 {font-size:clamp(3.9rem,13vw,6.4rem); margin:27px 0 35px}
  .hero-bottom {gap:15px; align-items:end}
  .hero-bottom p {font-size:1rem; max-width:300px; line-height:1.6}
  .circle-link {height:43px; width:43px; font-size:1.3rem}
  .hero-photo-label {display:none}
  .section-pad {padding:76px 0}
  h2 {font-size:clamp(3.1rem,12vw,5rem); margin-top:18px}
  .intro-right .lead {font-size:1.44rem}
  .work-heading-row {margin-bottom:36px}
  .service-grid {grid-template-columns:1fr}
  .service-card,.service-card:first-child {min-height:185px; padding:24px 30px 26px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.24)}
  .service-card:last-child {border-bottom:0}
  .service-symbol {right:5px; top:24px}
  .service-card h3 {font-size:1.7rem}
  .tenant-contact-card {padding:31px 25px}
  .tenant-card-title {margin:23px 0}
  .tenant-phone {font-size:1.6rem}
  .contact-grid {gap:35px}
  .contact-details {padding-top:12px}
  .footer-top {align-items:flex-start; flex-direction:column; gap:20px}
  .footer-top > p {font-size:1.4rem}
  .footer-bottom {grid-template-columns:1fr; gap:17px}
  .footer-bottom .photo-credit {justify-self:start}
}
@media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto}}