/* Point 4, ref-based full-width redesign 2026-10-25 v3.
   Loaded explicitly by the projects templates to avoid duplicate base3.html issue. */
.jp4-page, .jp4-page *, .jp4-page *::before, .jp4-page *::after { box-sizing: border-box; }
.jp4-page { background: #fff; color: #183c70; font-family: 'Roboto', Arial, sans-serif; overflow: clip; }
.jp4-page a { text-decoration: none; }
.jp4-page .jp4-shell { width: min(1410px, calc(100% - 96px)); margin-inline: auto; }
.jp4-hero { width: 100%; min-height: 508px; position: relative; overflow: hidden; background: linear-gradient(180deg, #e7f2fd 0%, #edf6fe 100%); }
.jp4-hero__photo { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 66%; background: url('/static/img/min/projects-hero-woman-reference-v3.jpg') 56% top / cover no-repeat; }
.jp4-hero__photo::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg, rgba(57,114,192,0.10) 0%, rgba(57,114,192,0.07) 24%, rgba(57,114,192,0.02) 46%, rgba(57,114,192,0) 72%); }
.jp4-hero__shade { pointer-events:none; position:absolute; z-index:1; inset:0; background: linear-gradient(90deg, #f0f7fe 0%, #ebf4fd 26%, rgba(235,244,253,.93) 36%, rgba(229,240,251,.62) 49%, rgba(229,240,251,0) 65%); }
.jp4-hero__inner { position: relative; z-index: 2; min-height: 508px; display: flex; align-items: center; }
.jp4-hero__content { max-width: 480px; padding: 56px 0 53px; }
.jp4-hero__title { margin: 0; color: #153e73; font-family: 'Roboto',Arial,sans-serif; font-weight: 400; font-size: clamp(43px, 3.5vw, 59px); line-height: 1.05; letter-spacing: -.025em; }
.jp4-hero__title span { display: block; }
.jp4-hero__title .jp4-hero__accent { color: #438fd3; }
.jp4-hero__text { max-width: 455px; margin: 27px 0 0; color:#62778a; font-size: 17px; line-height: 1.58; font-weight: 400; }
.jp4-rubrics { position: relative; width:100%; padding: 52px 0 56px; background: linear-gradient(135deg,#f7fbff 0%,#f4f9fe 70%,#f8fbff 100%); }
.jp4-rubrics::before { content:''; position: absolute; left:-160px; bottom:-170px; width:350px; height:350px; border: 1px solid rgba(61,149,211,.12); border-radius:50%; pointer-events:none; }
.jp4-rubrics__inner { position: relative; display:grid; grid-template-columns: minmax(0,1.58fr) minmax(0,1fr); gap:64px; align-items:center; }
.jp4-rubrics__heading { color:#153e73; font-size:37px; font-weight:400; margin:0 0 34px; line-height:1.08; letter-spacing: -.02em; }
.jp4-rubrics__lists { display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
.jp4-rubrics__list { margin:0; padding:0; list-style:none; }
.jp4-rubrics__list li + li { margin-top:20px; }
.jp4-rubrics__list a { display:inline-block; position:relative; padding-left:27px; color:#405b77; font-size:17px; line-height:1.45; transition:color .18s ease; }
.jp4-rubrics__list a::before { content:''; position:absolute; top:.67em; left:1px; width:9px; height:9px; border-radius:50%; background:#3894dd; transform:translateY(-50%); }
.jp4-rubrics__list a:hover, .jp4-rubrics__list a[aria-current="page"] { color:#1260ae; }
.jp4-featured { min-width:0; }
.jp4-featured__link { display:grid; grid-template-columns:72px minmax(0,1fr) 24px; gap:18px; align-items:start; padding:20px 22px 20px 20px; color:#244d81; background: linear-gradient(135deg, rgba(64,139,199,0.08) 0%, rgba(64,139,199,0.03) 100%); border: 1px solid rgba(62,126,190,0.18); border-radius: 14px; box-shadow: 0 6px 18px rgba(39,91,153,0.06); transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.jp4-featured__icon { width:56px; height:56px; color:#2f74bd; flex: 0 0 auto; }
.jp4-featured__title { margin:0; font-size:21px; line-height:1.35; font-weight:400; color:#204f84; }
.jp4-featured__text { margin:12px 0 0; font-size:15px; line-height:1.5; color:#7d90a4; }
.jp4-featured__arrow { align-self:center; justify-self:end; font-size:28px; color:#5f84ab; transition:transform .2s ease, color .2s ease; }
.jp4-featured__link:hover { background: linear-gradient(135deg, rgba(64,139,199,0.11) 0%, rgba(64,139,199,0.045) 100%); border-color: rgba(47,116,189,0.28); box-shadow: 0 10px 22px rgba(39,91,153,0.09); transform: translateY(-1px); }
.jp4-featured__link:hover .jp4-featured__arrow { transform:translateX(6px); color:#2f74bd; }
.jp4-featured__more { display:inline-block; margin:16px 0 0 79px; color:#367abd; font-size:15px; }
.jp4-list { padding:67px 0 98px; background:#fff; }
.jp4-list__eyebrow { margin:0 0 10px; color:#4b8ecd; font-size:13px; text-transform:uppercase; letter-spacing:.13em; }
.jp4-list__heading { margin:0 0 29px; font-size:39px; font-weight:400; line-height:1.1; color:#153f76; }
.jp4-list__items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 54px; border-top:1px solid #dfebf5; }
.jp4-project { min-width:0; border-bottom:1px solid #dfebf5; }
.jp4-project__link { position:relative; display:block; padding:30px 45px 33px 0; }
.jp4-project__title { margin:0; font-size:22px; line-height:1.34; font-weight:400; color:#245180; }
.jp4-project__text { color:#728599; font-size:15px; line-height:1.58; margin:14px 0 0; }
.jp4-project__action { margin-top:16px; font-size:14px; color:#377fc4; }
.jp4-project__link::after { content:'→'; position:absolute; right:4px; top:28px; font-size:24px; color:#438bc6; transition:transform .2s ease; }
.jp4-project__link:hover::after { transform:translateX(5px); }
.jp4-empty { color:#697f99; line-height:1.5; padding:30px 0; }
@media(max-width:1100px) {
  .jp4-page .jp4-shell { width:calc(100% - 64px); }
  .jp4-hero, .jp4-hero__inner { min-height:465px; }
  .jp4-hero__photo { width:67%; background-position:41% top; }
  .jp4-hero__content { max-width:390px; }
  .jp4-hero__title { font-size:48px; }
  .jp4-rubrics__inner { grid-template-columns:1.4fr 1fr; gap:34px; }
  .jp4-rubrics__list a { font-size:16px; }
}
@media(max-width:767px) {
  .jp4-page .jp4-shell { width:calc(100% - 36px); }
  .jp4-hero { min-height:0; display:flex; flex-direction:column; }
  .jp4-hero__photo { position:relative; order:2; top:auto; right:auto; bottom:auto; width:100%; height:325px; background-position:30% top; background-size:cover; }
  .jp4-hero__shade { position:absolute; height:50%; bottom:auto; background:linear-gradient(180deg,#eef7ff 0%,#e1eefb 100%); }
  .jp4-hero__inner { order:1; min-height:0; width:100%; }
  .jp4-hero__content { max-width:540px; padding:45px 0 32px; }
  .jp4-hero__title { font-size:clamp(37px, 8.3vw, 52px); line-height:1.04; }
  .jp4-hero__text { font-size:15px; max-width:530px; margin-top:19px; line-height:1.58; }
  .jp4-rubrics { padding:37px 0 42px; }
  .jp4-rubrics__inner { grid-template-columns:1fr; gap:32px; }
  .jp4-rubrics__heading { font-size:32px; margin-bottom:26px; }
  .jp4-rubrics__lists { gap:15px; }
  .jp4-rubrics__list a { font-size:15px; padding-left:19px; }
  .jp4-rubrics__list li+li { margin-top:17px; }
  .jp4-rubrics__list a::before { width:7px; height:7px; }
  .jp4-featured { border-top:1px solid rgba(62,126,190,.18); padding-top:24px; }
  .jp4-featured__link { grid-template-columns:48px minmax(0,1fr) 18px; gap:12px; padding:16px 16px 16px 14px; }
  .jp4-featured__icon { width:40px; height:40px; }
  .jp4-featured__title { font-size:18px; }
  .jp4-featured__text { font-size:14px; margin-top:10px; }
  .jp4-featured__more { margin-left:55px; }
  .jp4-list { padding:48px 0 65px; }
  .jp4-list__heading { font-size:34px; }
  .jp4-list__items { grid-template-columns:1fr; }
  .jp4-project__link { padding:25px 36px 27px 0; }
  .jp4-project__title { font-size:20px; }
}
@media(max-width:390px) {
  .jp4-hero__photo { height:285px; background-position:30% top; }
  .jp4-hero__content { padding-top:37px; padding-bottom:27px; }
  .jp4-rubrics__lists { grid-template-columns:1fr; gap:16px; }
}

/* HOTFIX 2026-10-26: mobile hero headroom only.
   Keep original desktop and landscape photo unchanged. */
@media (max-width: 767px) {
  .jp4-hero__photo {
    background-color: #c9dfe9;
    background-size: auto calc(100% - 32px);
    background-position: 30% bottom;
    background-repeat: no-repeat;
  }
}