/* NewHope SMS — photo-led layout (home hero, stories, gallery, service cards, page heroes). */
.ph { position: relative; overflow: hidden; border-radius: 18px; background: var(--gray); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease-out); }
.ph:hover img { transform: scale(1.05); }

.hx { padding: 104px 0 44px; position: relative; overflow: hidden; }
.hx::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 85% 25%, rgba(10,127,229,.10), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(255,148,3,.07), transparent 70%); }
.hx-grid { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; }
.hx h1 { font-size: clamp(30px, 3.9vw, 52px); font-weight: 900; line-height: 1.12; letter-spacing: -.01em; margin: 14px 0 14px; }
.hx h1 em { font-style: normal; color: var(--blue); }
.hx .lead { font-size: 16.5px; line-height: 1.7; color: var(--muted); text-align: justify; hyphens: auto; max-width: 520px; margin-bottom: 22px; }
.hx-mosaic { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: clamp(360px, 42vw, 540px); }
.hx-mosaic .big { grid-row: 1 / 3; }
.hx-mosaic .ph { border-radius: 20px; }
.sms-card { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px); box-shadow: 0 14px 40px rgba(8,39,99,.28); animation: smsIn .9s var(--ease-out) .5s both; }
.sms-card img { width: 36px; height: auto; flex: none; }
.sms-card b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.sms-card span { display: block; font-size: 13.5px; color: var(--text); line-height: 1.4; }
.sms-card small { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
@keyframes smsIn { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
.ph-chip { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 7px 12px; border-radius: 30px; background: rgba(8,39,99,.85); color: #fff; font-size: 12px; font-weight: 700; backdrop-filter: blur(6px); animation: smsIn .8s var(--ease-out) 1.1s both; }
.ph-chip i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3ee6b0; margin-right: 7px; }

.stat-band { background: var(--navy); color: #fff; }
.stat-band .container-site { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-band .s { padding: 20px 18px; border-left: 1px solid rgba(255,255,255,.14); }
.stat-band .s:first-child { border-left: 0; padding-left: 0; }
.stat-band b { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 900; }
.stat-band span { font-size: 13px; color: rgba(255,255,255,.7); }

.story { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.story .ph { height: clamp(340px, 34vw, 460px); border-radius: 20px; }
.story .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(8,39,99,.88)); }
.story .cap { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; color: #fff; }
.story .cap h3 { font-family: var(--font-display); font-size: 20px; font-weight: 900; margin-bottom: 10px; color: #fff; }
.story .bubble { background: #fff; color: var(--text); font-size: 13.5px; line-height: 1.45; padding: 10px 13px; border-radius: 14px 14px 14px 4px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.story .bubble small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }

.gal { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 12px; }
.gal .t { position: relative; border-radius: 16px; overflow: hidden; }
.gal .t.w { grid-column: span 2; } .gal .t.h { grid-row: span 2; }
.gal .t img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.gal .t:hover img { transform: scale(1.07); }
.gal .t::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(8,39,99,.85)); }
.gal .t > span:not(.fr-badge) { position: absolute; z-index: 2; left: 14px; bottom: 12px; right: 14px; color: #fff; font-weight: 700; font-size: 15px; font-family: var(--font-display); }
.gal .t > span:not(.fr-badge) small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12.5px; opacity: .92; margin-top: 2px; }

.svc4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.svc4 a { display: block; text-decoration: none; color: var(--text); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: #fff; transition: transform .4s var(--ease-out), box-shadow .4s, border-color .4s; }
.svc4 a:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(8,39,99,.14); border-color: var(--blue); }
.svc4 .ph { height: 170px; border-radius: 0; }
.svc4 .b { padding: 16px 18px 20px; }
.svc4 h3 { font-family: var(--font-display); font-size: 17px; font-weight: 900; margin-bottom: 6px; color: var(--navy); }
.svc4 p { font-size: 14px; color: var(--muted); line-height: 1.6; text-align: justify; hyphens: auto; }
.svc4 em { font-style: normal; font-weight: 700; font-size: 13px; color: var(--blue); display: inline-block; margin-top: 10px; }

.stepsp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stepsp .st .ph { height: 200px; border-radius: 18px; margin-bottom: 14px; }
.stepsp .n { position: absolute; left: 12px; top: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(8,39,99,.3); }
.stepsp h5 { font-family: var(--font-display); font-size: 18px; font-weight: 900; margin-bottom: 6px; }
.stepsp p { font-size: 14.5px; color: var(--muted); line-height: 1.65; text-align: justify; hyphens: auto; }

.cta-photo { position: relative; padding: 84px 0; text-align: center; color: #fff; overflow: hidden; isolation: isolate; }
.cta-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(8,39,99,.92), rgba(10,127,229,.62)); }
.cta-photo h2 { font-size: clamp(26px, 3.6vw, 44px); font-weight: 900; line-height: 1.2; margin-bottom: 12px; color: #fff; }
.cta-photo p { max-width: 560px; margin: 0 auto 24px; font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,.88); text-align: center; }

.pg-hero .container-site.has-photo { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.pg-photo { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 70px rgba(8,39,99,.18); }
.pg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.photo-strip .ph { height: 200px; }

@media (max-width: 1100px) { .gal { grid-template-columns: repeat(3, 1fr); } .svc4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991px) {
  .hx { padding: 92px 0 28px; } .hx-grid { grid-template-columns: 1fr; gap: 26px; }
  .story { grid-template-columns: 1fr; } .story .ph { height: 300px; }
  .stat-band .container-site { grid-template-columns: repeat(2, 1fr); } .stat-band .s:nth-child(3) { border-left: 0; padding-left: 0; }
  .stepsp { grid-template-columns: 1fr; } .stepsp .st .ph { height: 190px; }
  .pg-hero .container-site.has-photo { grid-template-columns: 1fr; } .pg-photo { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .hx-mosaic { height: 340px; gap: 8px; } .gal { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: 8px; }
  .svc4 { grid-template-columns: 1fr; } .photo-strip { grid-template-columns: 1fr; } .gal .t.w { grid-column: span 2; }
  .sms-card { left: 8px; right: 8px; bottom: 8px; padding: 10px 11px; } .sms-card small { display: none; }
}

.credits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.credit .ph { height: 190px; }
.credit figcaption { padding-top: 10px; display: grid; gap: 2px; font-size: 13.5px; color: var(--muted); }
.credit figcaption b { color: var(--navy); font-size: 14.5px; }
.credit figcaption a { color: var(--blue); font-weight: 600; text-decoration: none; }
@media (max-width: 900px) { .credits-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .credits-grid { grid-template-columns: 1fr; } }

.hx-photo { position: relative; margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 5 / 4; box-shadow: 0 30px 70px rgba(8,39,99,.2); }
.hx-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
@media (max-width: 991px) { .hx-photo { aspect-ratio: 4 / 3; } }

/* ── NewHope frame system ────────────────────────────────────────────────────
   Leaf-shaped frames (two opposite corners rounded, two nearly square) echo the logo's folded ribbon.
   Large frames add an offset outline and the orange "sun" peeking from behind; every frame carries the
   NewHope badge, so the photography always reads as NewHope identity. */
:root { --leaf: 34px 6px 34px 6px; --leaf-sm: 24px 5px 24px 5px; }
.ph { border-radius: var(--leaf-sm); }
.hx-mosaic .ph, .story .ph { border-radius: var(--leaf); }
.gal .t { border-radius: var(--leaf-sm); }
.gal .t:nth-child(even) { border-radius: 5px 24px 5px 24px; }
.story .ph:nth-child(even) { border-radius: 6px 34px 6px 34px; }
.stepsp .st .ph { border-radius: var(--leaf-sm); }
.svc4 .ph { clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%); height: 184px; }
.svc4 a { border-radius: var(--leaf-sm); }
.svc4 a:nth-child(even) .ph { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 84%); }

.fr-badge { position: absolute; top: 12px; left: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 7px;
  background: rgba(255,255,255,.95); border-radius: 30px; box-shadow: 0 6px 18px rgba(8,39,99,.22); backdrop-filter: blur(6px);
  font-family: 'Montserrat', var(--font-body); font-weight: 800; font-size: 11px; letter-spacing: .01em; color: var(--navy); line-height: 1; }
.ph .fr-badge img, .gal .t .fr-badge img, .fr-badge img { position: static; width: auto; height: 15px; object-fit: contain; transform: none !important; transition: none; }
.fr-badge::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange, #FF9403); margin-left: 1px; }
.gal .t .fr-badge, .story .fr-badge { top: 12px; left: 12px; }

/* hero + page hero: offset outline and sun disc */
.hx-photo, .pg-photo { overflow: visible; border-radius: 0; box-shadow: none; position: relative; isolation: isolate; }
.hx-photo > img, .pg-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; border-radius: 38px 7px 38px 7px;
  box-shadow: 0 30px 70px rgba(8,39,99,.22); }
.hx-photo::before, .pg-photo::before { content: ''; position: absolute; z-index: -1; inset: 16px -16px -16px 16px; border: 2px solid var(--blue); border-radius: 38px 7px 38px 7px; opacity: .55; }
.hx-photo::after, .pg-photo::after { content: ''; position: absolute; z-index: -2; right: -34px; top: -34px; width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFC857, #FF9403 70%); opacity: .95; }
.pg-photo { aspect-ratio: 4 / 3; margin-right: 16px; margin-top: 10px; }
.hx-photo .fr-badge, .pg-photo .fr-badge { top: 16px; left: 16px; font-size: 12px; padding: 6px 12px 6px 8px; }
.hx-photo .fr-badge img, .pg-photo .fr-badge img { height: 17px; }
.photo-strip .ph:nth-child(2) { border-radius: 5px 24px 5px 24px; }
@media (max-width: 991px) { .hx-photo::after, .pg-photo::after { width: 96px; height: 96px; right: -16px; top: -26px; } .hx-photo::before, .pg-photo::before { inset: 12px -10px -12px 12px; } .pg-photo { margin-right: 10px; } }

/* ── Photo scroll reveal ─────────────────────────────────────────────────────
   JS adds .rv (hidden state) only when motion is allowed. Each frame wipes open with a different direction,
   the photo settles from a zoom, the outline/sun/badge arrive in sequence, and large photos drift on scroll. */
.rv > img:first-of-type { --sc: 1.3; transform: translate3d(0, var(--py, 0px), 0) scale(var(--sc));
  clip-path: var(--clip0, inset(100% 0 0 0));
  transition: clip-path 1.25s cubic-bezier(.77, 0, .18, 1) var(--rd, 0ms), transform 1.9s var(--ease-out) var(--rd, 0ms);
  will-change: transform, clip-path; }
.rv.v1 { --clip0: inset(0 100% 0 0); }
.rv.v2 { --clip0: inset(0 0 0 100%); }
.rv.v3 { --clip0: circle(0% at 12% 88%); --clip1: circle(150% at 12% 88%); }
.rv.v0 { --clip0: inset(100% 0 0 0); }
.rv.shown > img:first-of-type { --sc: 1; clip-path: var(--clip1, inset(0 0 0 0)); }
.rv.par.shown > img:first-of-type { --sc: 1.12; }
.ph.rv:hover > img:first-of-type, .gal .t.rv:hover > img:first-of-type { transform: translate3d(0, var(--py, 0px), 0) scale(1.18); transition: transform 1.2s var(--ease-out); }
.cta-photo.rv > img { --sc: 1.3; }

.rv .fr-badge { opacity: 0; transform: translateX(-18px); transition: opacity .6s ease calc(var(--rd, 0ms) + 700ms), transform .8s var(--ease-out) calc(var(--rd, 0ms) + 700ms); }
.rv.shown .fr-badge { opacity: 1; transform: none; }
.hx-photo.rv::before, .pg-photo.rv::before { opacity: 0; transform: translate(-22px, -22px); transition: opacity .8s ease calc(var(--rd, 0ms) + 500ms), transform 1.1s var(--ease-out) calc(var(--rd, 0ms) + 500ms); }
.hx-photo.rv.shown::before, .pg-photo.rv.shown::before { opacity: .55; transform: none; }
.hx-photo.rv::after, .pg-photo.rv::after { transform: scale(0) rotate(-90deg); transition: transform 1.2s cubic-bezier(.34, 1.56, .64, 1) calc(var(--rd, 0ms) + 650ms); }
.hx-photo.rv.shown::after, .pg-photo.rv.shown::after { transform: none; }
.story .rv .bubble, .story .rv h3 { opacity: 0; transform: translateY(18px); transition: opacity .7s ease calc(var(--rd, 0ms) + 650ms), transform .9s var(--ease-out) calc(var(--rd, 0ms) + 650ms); }
.story .rv.shown .bubble, .story .rv.shown h3 { opacity: 1; transform: none; }
.gal .t.rv > span:not(.fr-badge) { opacity: 0; transform: translateY(12px); transition: opacity .6s ease calc(var(--rd, 0ms) + 600ms), transform .8s var(--ease-out) calc(var(--rd, 0ms) + 600ms); }
.gal .t.rv.shown > span:not(.fr-badge) { opacity: 1; transform: none; }
.stepsp .rv .n { transform: scale(0); transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) calc(var(--rd, 0ms) + 600ms); }
.stepsp .rv.shown .n { transform: none; }

.gal .t.rv::after, .story .ph.rv::after { opacity: 0; transition: opacity .9s ease calc(var(--rd, 0ms) + 450ms); }
.gal .t.rv.shown::after, .story .ph.rv.shown::after { opacity: 1; }