/* ── PAGE-SPECIFIC STYLES ── */

 /* Hero */
 .page-hero {
     background: var(--navy);
     position: relative;
     overflow: hidden;
     padding: 130px 5% 80px;
     text-align: center;
 }

 .page-hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(37, 99, 235, .18) 0%, transparent 55%),
         linear-gradient(160deg, #07111f, #0b1d38 50%, #091629);
 }

 .page-hero .h-grid {
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
     background-size: 54px 54px;
 }

 .orb {
     position: absolute;
     border-radius: 50%;
     filter: blur(70px);
     pointer-events: none;
 }

 .orb1 {
     width: 460px;
     height: 460px;
     background: rgba(37, 99, 235, .13);
     top: -120px;
     right: -60px;
     animation: bob 11s ease-in-out infinite;
 }

 .orb2 {
     width: 300px;
     height: 300px;
     background: rgba(245, 158, 11, .08);
     bottom: -40px;
     left: 5%;
     animation: bob 14s ease-in-out infinite reverse;
 }

 @keyframes bob {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-36px);
     }
 }

 .page-hero-in {
     position: relative;
     z-index: 2;
     max-width: 720px;
     margin: 0 auto;
 }

 .page-hero h1 {
     font-family: 'Fraunces', serif;
     font-size: clamp(2.2rem, 4.5vw, 3.4rem);
     color: #fff;
     line-height: 1.1;
     letter-spacing: -.4px;
     margin-bottom: 16px;
 }

 .page-hero h1 em {
     font-style: italic;
     color: var(--sky);
 }

 .page-hero h1 strong {
     color: var(--gold);
 }

 .page-hero .h-sub {
     font-size: 1rem;
     color: rgba(255, 255, 255, .6);
     line-height: 1.78;
     margin-bottom: 28px;
     max-width: 580px;
     margin-left: auto;
     margin-right: auto;
 }

 /* ── DREAM SECTION ── */
 .dream-sec {
     background: var(--white);
 }

 .dream-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 72px;
     align-items: start;
 }

 /* Left: photo */
 .dream-img-wrap {
     position: relative;
     top: 0;
 }

 .dream-photo {
     width: 100%;
     aspect-ratio: 4/5;
     object-fit: cover;
     border-radius: 22px;
     display: block;
 }

 .dream-badge {
     position: absolute;
     bottom: -18px;
     right: -14px;
     background: linear-gradient(135deg, var(--sun), var(--gold));
     border-radius: 16px;
     padding: 16px 20px;
     text-align: center;
     box-shadow: 0 8px 28px rgba(245, 158, 11, .42);
 }

 .db-n {
     font-family: 'Fraunces', serif;
     font-size: 2.2rem;
     color: var(--ink);
     line-height: 1;
 }

 .db-l {
     font-size: .64rem;
     font-weight: 800;
     color: var(--ink);
     text-transform: uppercase;
     letter-spacing: .6px;
     margin-top: 2px;
 }

 /* Right: essay */
 .dream-body {
     padding-top: 4px;
 }

 .dream-body .about-text p {
     font-size: .97rem;
     color: var(--slate);
     line-height: 1.82;
     margin-bottom: 16px;
 }

 .dream-body .about-text p strong {
     color: var(--ink);
     font-weight: 700;
 }

 .dream-body .about-text p em {
     color: var(--royal);
     font-style: italic;
 }

 /* Pull quote */
 .pull-quote {
     background: var(--mist);
     border-left: 4px solid var(--blue);
     border-radius: 0 14px 14px 0;
     padding: 20px 24px;
     margin: 28px 0;
 }

 .pull-quote p {
     font-family: 'Fraunces', serif;
     font-size: 1.12rem;
     font-style: italic;
     color: var(--royal);
     line-height: 1.5;
     margin: 0 !important;
 }

 /* ── IDENTITY SHIFT BANNER ── */
 .shift-banner {
     background: linear-gradient(135deg, var(--navy), #0d2550);
     position: relative;
     overflow: hidden;
     padding: 72px 5%;
     text-align: center;
 }

 .shift-banner::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(37, 99, 235, .14) 0%, transparent 65%);
 }

 .shift-banner .h-grid {
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
     background-size: 54px 54px;
 }

 .shift-banner-in {
     position: relative;
     z-index: 2;
     max-width: 760px;
     margin: 0 auto;
 }

 .shift-banner blockquote {
     font-family: 'Fraunces', serif;
     font-size: clamp(1.5rem, 3vw, 2.2rem);
     font-style: italic;
     color: #fff;
     line-height: 1.35;
     margin-bottom: 16px;
 }

 .shift-banner blockquote strong {
     color: var(--gold);
     font-style: normal;
 }

 .shift-banner cite {
     font-size: .8rem;
     color: rgba(255, 255, 255, .45);
     font-style: normal;
     letter-spacing: .8px;
     text-transform: uppercase;
 }

 /* ── HIGHLIGHTS ── */
 .hl-sec {
     background: var(--cream);
 }

 .hl-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     margin-top: 48px;
 }

 .hl-card {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 18px;
     padding: 28px 22px;
     transition: all .28s;
     position: relative;
     overflow: hidden;
 }

 .hl-card::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--blue);
     transform: scaleX(0);
     transition: transform .28s;
     transform-origin: left;
 }

 .hl-card:hover {
     border-color: rgba(37, 99, 235, .25);
     transform: translateY(-5px);
     box-shadow: 0 16px 40px rgba(37, 99, 235, .09);
 }

 .hl-card:hover::after {
     transform: scaleX(1);
 }

 .ahl-ico {
     width: 44px;
     height: 44px;
     background: var(--mist);
     border-radius: 11px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     flex-shrink: 0;
     margin-bottom: 14px;
 }

 .hl-card h4 {
     font-size: .95rem;
     font-weight: 700;
     color: var(--ink);
     margin-bottom: 6px;
 }

 .hl-card p {
     font-size: .84rem;
     color: var(--slate);
     line-height: 1.65;
 }

 /* ── CREDENTIALS ── */
 .cred-sec {
     background: var(--white);
 }

 .cred-inner {
     display: grid;
     grid-template-columns: 1fr 1.6fr;
     gap: 72px;
     align-items: start;
 }

 .cred-left h2 {
     margin-bottom: 16px;
 }

 .cred-left p {
     font-size: .92rem;
     color: var(--slate);
     line-height: 1.75;
 }

 .cred-photo-wrap {
     margin-top: 32px;
     position: relative;
     display: inline-block;
 }

 .cred-sig {
     font-family: 'Fraunces', serif;
     font-size: .95rem;
     font-style: italic;
     color: var(--royal);
     margin-top: 16px;
     line-height: 1.4;
 }

 .cred-sig span {
     display: block;
     font-family: 'DM Sans', sans-serif;
     font-style: normal;
     font-size: .75rem;
     color: var(--slate);
     margin-top: 2px;
 }

 /* Credential list */
 .cred-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 0;
 }

 .cred-item {
     display: flex;
     gap: 14px;
     align-items: flex-start;
     padding: 18px 0;
     border-bottom: 1px solid var(--border);
 }

 .cred-item:last-child {
     border-bottom: none;
 }

 .cred-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--sun), var(--gold));
     flex-shrink: 0;
     margin-top: 5px;
     box-shadow: 0 2px 8px rgba(245, 158, 11, .4);
 }

 .cred-item-body strong {
     display: block;
     font-size: .93rem;
     font-weight: 700;
     color: var(--ink);
     margin-bottom: 2px;
 }

 .cred-item-body span {
     font-size: .82rem;
     color: var(--slate);
 }

 .cred-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: rgba(245, 158, 11, .1);
     border: 1px solid rgba(245, 158, 11, .28);
     color: var(--sun);
     font-size: .7rem;
     font-weight: 700;
     letter-spacing: 1px;
     text-transform: uppercase;
     padding: 3px 10px;
     border-radius: 40px;
     margin-top: 5px;
     display: inline-block;
 }

 /* ── STORY CLOSE / CTA ── */
 .story-close {
     background: var(--cream);
     padding: 72px 5%;
 }

 .story-close-in {
     max-width: 820px;
     margin: 0 auto;
     text-align: center;
 }

 .story-close-in p {
     font-size: 1.05rem;
     color: var(--slate);
     line-height: 1.82;
     margin-bottom: 20px;
 }

 .story-close-in p strong {
     color: var(--ink);
 }

 .story-close-in p em {
     color: var(--royal);
     font-style: italic;
 }

 /* ── RESPONSIVE ── */
 @media (max-width: 1024px) {

     .dream-grid,
     .cred-inner {
         grid-template-columns: 1fr;
         gap: 48px;
     }

     .dream-img-wrap {
         max-width: 400px;
         margin: 0 auto;
     }

     .hl-grid {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media (max-width: 768px) {
     .hl-grid {
         grid-template-columns: 1fr;
     }

     .page-hero {
         padding: 100px 4% 60px;
     }
 }