/* RoamLabs Media site styles. Built from the navy and gold design. */
body { margin: 0; font-family: 'Karla', sans-serif; background: linear-gradient(180deg, #2D3250 0%, #272B47 38%, #2D3250 70%, #262A45 100%); color: #FFFFFF; overflow-x: hidden; }
a { color: #F9B17A; text-decoration: none; }
a:hover { color: #FDCBA0; }
h1, h2, h3 { font-family: 'Lato', sans-serif; margin: 0; }
.btn { display: inline-flex; align-items: center; gap: 10px; justify-content: center; min-height: 50px; padding: 0 30px; border-radius: 999px; font-family: 'Karla', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.3px; }
.btn-primary { background: #F9B17A; color: #2D3250; }
.btn-primary:hover { background: #FDCBA0; color: #2D3250; }
.btn-outline { background: linear-gradient(135deg, rgba(103,111,157,0.18), rgba(103,111,157,0.04)); color: #FFFFFF; border: 1.5px solid #676F9D; }
.btn-outline:hover { border-color: #F9B17A; color: #F9B17A; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; background: linear-gradient(135deg, rgba(103,111,157,0.45) 0%, rgba(66,71,105,0.9) 100%); border: 1px solid rgba(255,255,255,0.09); font-size: 13px; font-weight: 600; letter-spacing: 0.3px; color: #FFFFFF; white-space: nowrap; }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: #F9B17A; }
.navlink { color: #FFFFFF; font-weight: 600; font-size: 15px; }
.navlink:hover { color: #F9B17A; }
.eyebrow { color: #F9B17A; font-weight: 700; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; }
.card { background: linear-gradient(160deg, #50577F 0%, #424769 45%, #353A5C 100%); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 32px; }
.muted { color: #FFFFFF; }
section { padding: 100px 48px; }
.tagrow { display: flex; gap: 14px; flex-wrap: wrap; }
.arc { position: relative; width: 100%; max-width: 1400px; margin: 0 auto 36px; aspect-ratio: 1400 / 380; }
.arc-img { position: absolute; width: 10.5%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 20px 40px rgba(0,0,0,0.4); background: #424769; }
@media (max-width: 640px) { .arc { width: 203%; max-width: none; margin-left: -51.5%; } }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; width: 100%; max-width: 1500px; margin: 0 auto; }
.faq-list { max-width: 860px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.faq { background: linear-gradient(160deg, #50577F 0%, #424769 45%, #353A5C 100%); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 0 28px; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 18px; color: #FFFFFF; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: #F9B17A; font-size: 28px; font-weight: 400; line-height: 1; flex-shrink: 0; }
.faq[open] summary::after { content: "\2013"; }
.faq summary:focus-visible { outline: 2px solid #F9B17A; outline-offset: 4px; border-radius: 6px; }
.faq p strong { color: #F9B17A; font-weight: 700; }
.faq p { margin: 0; padding: 0 0 24px; color: #FFFFFF; font-size: 15.5px; line-height: 1.7; max-width: 740px; }
.sec-title { font-size: 52px; font-weight: 900; line-height: 1.05; color: #F9B17A; }
.sec-sub { font-size: 20px; line-height: 1.5; color: #FFFFFF; margin: 0; max-width: 640px; }
.card-gold { background: #F9B17A; color: #2D3250; border-radius: 14px; padding: 32px; }
.hl { color: #F9B17A; }
.hero-art { position: absolute; inset: 0; z-index: 0; background-image: url(hero-desktop.jpg); background-size: cover; background-position: center 82%; filter: saturate(0.9) contrast(1.04); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%); }
.hero-art::after { content: ""; position: absolute; inset: 0; background: rgba(45,50,80,0.90); }
.panel { background: linear-gradient(160deg, #50577F 0%, #424769 45%, #353A5C 100%); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; padding: 56px 48px 60px; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.panel-title { font-size: clamp(26px, 2.6vw, 36px); font-weight: 900; line-height: 1.2; text-align: center; text-wrap: balance; max-width: 900px; }
.steps3 { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 24px; width: 100%; max-width: 1000px; }
.fp-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.fp-icon { width: 64px; height: 64px; border-radius: 50%; background: #2D3250; border: 1px solid rgba(249,177,122,0.5); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.fp-item h3 { font-size: 22px; font-weight: 900; line-height: 1.2; }
.fp-item p { margin: 0; font-size: 16px; line-height: 1.6; color: #FFFFFF; max-width: 270px; }
.fp-arrow { margin-top: 20px; display: flex; align-items: center; }
@media (max-width: 760px) { .panel { padding: 36px 22px 40px; gap: 32px; } .steps3 { grid-template-columns: 1fr; gap: 28px; } .fp-arrow { display: none; } }
.step-title { font-size: clamp(17px, 1.4vw, 20px); font-weight: 800; line-height: 1.25; color: #FFFFFF; margin-bottom: 12px; }
.svc { padding: 0 !important; overflow: hidden; container-type: inline-size; }
.svc-art { height: 175px; display: flex; align-items: flex-end; padding: 0 0 14px 7cqw; overflow: hidden; }
.svc-navy { background: transparent; --c: #FFFFFF; --d: #F9B17A; }
.svc-gold { background: #F9B17A; --c: #2D3250; --d: #2D3250; }
.svc-word { font-family: 'Lato', sans-serif; font-weight: 900; font-size: min(29cqw, 124px); line-height: 0.9; letter-spacing: 0.03em; color: transparent; -webkit-text-stroke: 2px var(--c); white-space: nowrap; }
.svc-dot { width: 5.5cqw; height: 5.5cqw; border-radius: 50%; background: var(--d); margin: 0 0 1.9cqw 1.9cqw; flex: none; }
.svc-body { padding: 22px 24px 28px; }
.svc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.svc-tag { margin-left: 4px; padding: 3px 8px; border: 1px solid rgba(249,177,122,0.65); border-radius: 999px; color: #F9B17A; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
.svc-head h3 { font-size: 19px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
@media (max-width: 760px) { .sec-title { font-size: 38px; } .sec-sub { font-size: 17px; } }
#contact { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(45,50,80,0.84) 0%, rgba(45,50,80,0.78) 100%), url(story-photo.jpg) center 30% / cover no-repeat, #353A5C; }
@media (max-width: 760px) { #hero { min-height: 640px !important; padding: 72px 24px !important; } }
@media (max-width: 760px), (max-width: 900px) and (max-aspect-ratio: 1/1) { .hero-art { background-image: url(hero-mobile.jpg); background-position: center 38%; } }
.appr { padding: 0 !important; overflow: hidden; }
.appr-art { display: block; width: 100%; height: auto; max-height: 210px; }
.appr-body { padding: 18px 24px 28px; }
.nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 48px; background: linear-gradient(180deg, rgba(45,50,80,0.97) 0%, rgba(45,50,80,0.85) 100%); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(103,111,157,0.35); }
.nav-brand { display: flex; align-items: center; gap: 14px; color: #FFFFFF; }
.nav-brand:hover { color: #FFFFFF; }
.nav-right { display: flex; align-items: center; gap: 32px; }
.navlink.on { color: #F9B17A; }
@media (max-width: 760px) { .nav { flex-wrap: wrap; padding: 14px 20px; } .nav-right { width: 100%; justify-content: space-between; gap: 12px; } .navlink { font-size: 14px; } }
@media (max-width: 1279px) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid4 { grid-template-columns: 1fr; } .faq { padding: 0 20px; } .faq summary { font-size: 16px; } }
@media (max-width: 760px) {
    section { padding: 64px 24px; }
      .hero-sub { font-size: 38px !important; }
  }
.btn-dark { background: #2D3250; color: #FFFFFF; }
.btn-dark:hover { background: #424769; color: #FFFFFF; }
.cta-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; background: linear-gradient(135deg, #424769 0%, #353A5C 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; margin: 0 48px 48px; padding: 72px 32px; }
@media (max-width: 760px) { section { padding: 64px 24px; } .sec-title { font-size: 38px; } .sec-sub { font-size: 17px; } .cta-box { margin: 0 24px 32px; padding: 48px 22px; } }
.pf-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 90px 48px 40px; }
.cases { display: flex; flex-direction: column; gap: 28px; max-width: 1304px; margin: 0 auto; width: 100%; }
.case { display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr); gap: 48px; align-items: center; padding: 40px 48px; border-radius: 20px; background: linear-gradient(160deg, #50577F 0%, #424769 45%, #353A5C 100%); border: 1px solid rgba(255,255,255,0.07); }
.case.rev { grid-template-columns: minmax(0, 1fr) minmax(0, 270px); }
.case.rev .case-img { order: 2; }
.case-img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 20px 40px rgba(0,0,0,0.4); background: #424769; }
.case-body { display: flex; flex-direction: column; gap: 22px; }
.case-body h2 { font-size: 36px; font-weight: 900; line-height: 1.1; }
.case-body p { margin: 0; font-size: 17px; line-height: 1.6; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px 28px; }
.stat b { display: block; font-family: 'Lato', sans-serif; font-weight: 900; font-size: 38px; line-height: 1.05; color: #F9B17A; }
.stat span { display: block; margin-top: 4px; font-size: 15px; }
.gal { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; max-width: 1100px; margin: 0 auto; }
.gal figure { margin: 0; width: calc((100% - 66px) / 4); }
.gal img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 20px 40px rgba(0,0,0,0.35); background: #424769; }
.gal figcaption { margin-top: 12px; font-size: 15px; line-height: 1.4; text-align: center; }
@media (max-width: 1000px) { .gal figure { width: calc((100% - 44px) / 3); } }
@media (max-width: 860px) { .case, .case.rev { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px; } .case-img, .case.rev .case-img { order: 0; max-width: 230px; margin: 0 auto; } .case-body h2 { font-size: 30px; } }
@media (max-width: 640px) { .pf-head { padding: 56px 24px 24px; } .gal { gap: 16px; } .gal figure { width: calc((100% - 16px) / 2); } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .stat b { font-size: 30px; } }
.pf-photo-head { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 96px 48px 84px; }
.pf-photo-art { position: absolute; inset: 0; z-index: 0; background-image: url(works-header.jpg); background-size: cover; background-position: center 40%; filter: saturate(0.9); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%); }
.pf-photo-art::after { content: ""; position: absolute; inset: 0; background: rgba(45,50,80,0.88); }
.pf-photo-head > :not(.pf-photo-art) { position: relative; z-index: 1; }
@media (max-width: 640px) { .pf-photo-head { padding: 64px 24px 56px; } }
.ct-head { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 96px 48px 84px; }
.ct-art { position: absolute; inset: 0; z-index: 0; background-image: url(contact-photo.jpg); background-size: cover; background-position: center 40%; filter: saturate(0.9); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%); }
.ct-art::after { content: ""; position: absolute; inset: 0; background: rgba(45,50,80,0.88); }
.ct-head > :not(.ct-art) { position: relative; z-index: 1; }
.ct-wrap { max-width: 1100px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 24px; }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 24px; align-items: stretch; }
.ct-grid h2, .ct-wrap h2 { font-size: 28px; font-weight: 900; line-height: 1.15; }
.step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; }
.step b { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 44px; line-height: 1; color: #F9B17A; }
.step h3 { font-size: 20px; font-weight: 800; line-height: 1.25; margin-bottom: 6px; }
.step p { margin: 0; font-size: 16px; line-height: 1.6; }
.inc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.inc div { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; line-height: 1.55; }
.facts { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; font-size: 16px; }
.facts b { display: block; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; opacity: 0.8; margin-bottom: 2px; }
@media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr; } .inc { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ct-head { padding: 64px 24px 56px; } .step { grid-template-columns: 44px minmax(0, 1fr); } .step b { font-size: 36px; } }
button.btn { border: 0; cursor: pointer; }
.cf-card { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; padding: 40px; align-items: start; }
.cf-intro { display: flex; flex-direction: column; gap: 16px; }
.cf-intro h2 { font-size: 28px; font-weight: 900; line-height: 1.15; }
.cf-intro p { margin: 0; font-size: 16px; line-height: 1.6; }
.cf { display: flex; flex-direction: column; gap: 20px; }
.cf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cf-field { display: flex; flex-direction: column; gap: 8px; }
.cf-field label { font-size: 14px; font-weight: 700; letter-spacing: 0.3px; color: #FFFFFF; }
.cf-field input, .cf-field textarea { box-sizing: border-box; width: 100%; min-height: 52px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.45); background: rgba(45,50,80,0.55); color: #FFFFFF; font-family: 'Karla', sans-serif; font-size: 16px; line-height: 1.5; }
.cf-field textarea { min-height: 150px; resize: vertical; }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: rgba(255,255,255,0.62); }
.cf-field input:focus, .cf-field textarea:focus { outline: none; border-color: #F9B17A; box-shadow: 0 0 0 3px rgba(249,177,122,0.28); }
.cf-field.bad input, .cf-field.bad textarea { border-color: #F9B17A; border-width: 2px; }
.cf-msg { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #F9B17A; }
.cf-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.cf-note { font-size: 14px; color: #FFFFFF; }
@media (max-width: 900px) { .cf-card { grid-template-columns: 1fr; gap: 28px; padding: 32px 28px; } }
@media (max-width: 640px) { .cf-card { padding: 28px 22px; } .cf-row { grid-template-columns: 1fr; } .cf-actions .btn { width: 100%; } }
.cf-intro h3 { font-size: 20px; font-weight: 800; line-height: 1.25; margin-top: 14px; }
.cf-intro .inc { grid-template-columns: 1fr; gap: 14px; }
.cf-intro .inc div { font-size: 15.5px; }
.cf-card.is-sent { grid-template-columns: 1fr; padding: 56px 40px; }
.cf-card.is-sent .cf-body { width: 100%; }
@media (max-width: 640px) { .cf-card.is-sent { padding: 36px 22px; } }
.cf-v { width: 100%; display: flex; flex-direction: column; }
.cf-v p { margin: 0; }
.vA { align-items: center; text-align: center; gap: 12px; }
.vA h3.vA-title { font-size: 34px; font-weight: 900; line-height: 1.15; }
.vA .vA-sub { font-size: 17px; line-height: 1.6; max-width: 520px; text-wrap: balance; }
.vA-track { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; width: 100%; max-width: 940px; margin-top: 40px; }
.vA-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.vA-txt { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vA-dot { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Lato', sans-serif; font-weight: 900; font-size: 22px; color: #F9B17A; background: #2D3250; border: 2px solid #F9B17A; }
.vA-node.done .vA-dot { background: #F9B17A; }
.vA-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; }
.vA-tick { position: absolute; inset: 0; margin: auto; }
.vA-tick polyline { stroke-dasharray: 24; }
.vA-node b { font-family: 'Lato', sans-serif; font-size: 19px; font-weight: 800; line-height: 1.25; color: #FFFFFF; }
.vA-node i { font-style: normal; font-size: 15.5px; line-height: 1.55; max-width: 250px; color: #FFFFFF; }
.vA-when { display: inline-block; padding: 4px 12px; border: 1px solid rgba(249,177,122,0.7); border-radius: 999px; color: #F9B17A; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; }
.vA-line { width: clamp(36px, 7vw, 100px); height: 2px; background: rgba(249,177,122,0.6); margin-top: 25px; transform-origin: left center; }
.vA-node.n1::before, .vA-node.n1::after, .vA-node.n2::before, .vA-node.n2::after { display: none; }
@keyframes vA-fill { from { background: #2D3250; } to { background: #F9B17A; } }
@keyframes vA-one { 0% { opacity: 0; transform: scale(0.6); } 20% { opacity: 1; transform: scale(1); } 72% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.6); } }
@keyframes vA-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes vA-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes vA-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes vA-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes vA-growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vA-growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.vA-node.done .vA-dot { animation: vA-fill 0.5s ease 0.9s both; }
.vA-num { animation: vA-one 1.2s ease both; }
.vA-tick { animation: vA-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) 1s both; }
.vA-tick polyline { animation: vA-draw 0.45s ease 1.05s both; }
.vA-node.n1 .vA-txt { animation: vA-fade 0.5s ease 1.1s both; }
.vA-line.l1 { animation: vA-growX 0.6s ease 1.6s both; }
.vA-line.l2 { animation: vA-growX 0.6s ease 2.1s both; }
@media (prefers-reduced-motion: reduce) { .vA *, .vA *::before, .vA *::after { animation: none !important; } }
@media (max-width: 760px) {
    .vA h3.vA-title { font-size: 28px; }
    .vA-track { grid-template-columns: 1fr; max-width: 380px; margin-top: 32px; }
    .vA-line { display: none; }
    .vA-node { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; align-items: start; text-align: left; padding-bottom: 34px; }
    .vA-node.n1 { min-height: 100px; }
    .vA-node.n3 { padding-bottom: 0; }
    .vA-txt { align-items: flex-start; padding-top: 13px; }
    .vA-node.n1::after, .vA-node.n2::after { display: block; content: ""; position: absolute; left: 25px; top: 60px; bottom: 12px; width: 2px; background: rgba(249,177,122,0.6); transform-origin: top center; }
    .vA-node.n1::before, .vA-node.n2::before { display: block; content: ""; position: absolute; left: 21px; bottom: 8px; width: 8px; height: 8px; border-right: 2px solid #F9B17A; border-bottom: 2px solid #F9B17A; transform: rotate(45deg); }
    .vA-node.n1::after { animation: vA-growY 0.6s ease 1.6s both; }
    .vA-node.n2::after { animation: vA-growY 0.6s ease 2.1s both; }
    .vA-node.n1::before { animation: vA-show 0.3s ease 2.1s both; }
    .vA-node.n2::before { animation: vA-show 0.3s ease 2.6s both; }
  }
.pr-wrap { max-width: 1100px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
.pr-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 20px 40px rgba(0,0,0,0.4); background: #424769; }
.pr-img.p1 { transform: translateY(30px) rotate(-6deg); }
.pr-img.p2 { transform: rotate(-2deg); }
.pr-img.p3 { transform: rotate(2deg); }
.pr-img.p4 { transform: translateY(30px) rotate(6deg); }
@media (max-width: 760px) { .pr-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .pr-img.p1 { transform: rotate(-3deg); } .pr-img.p2 { transform: rotate(2.5deg); } .pr-img.p3 { transform: rotate(2.5deg); } .pr-img.p4 { transform: rotate(-3deg); } }
.pr-contact { margin-top: 36px; padding-bottom: 36px; }

/* ---- page wrappers (replace the design runtime's wrapper) ---- */
.page { width: 100%; max-width: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.page-main { display: flex; flex-direction: column; }
:focus-visible { outline: 2px solid #F9B17A; outline-offset: 3px; }

/* ---- live contact form ---- */
[hidden] { display: none !important; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cf-card { scroll-margin-top: 96px; }
.vA-title:focus { outline: none; }
button.btn:disabled { opacity: 0.7; cursor: default; }
.cf-form-error { margin: 0; }
.cf-form-error a { text-decoration: underline; }

/* ---- Portfolio: embedded video groups ---- */
.vid-groups { display: flex; flex-direction: column; gap: 64px; max-width: 1100px; margin: 0 auto; width: 100%; }
.vid-group h3 { font-size: 28px; font-weight: 900; line-height: 1.15; color: #FFFFFF; text-align: center; margin: 0 0 24px; }
.vid-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.vid-row + .vid-row { margin-top: 22px; }
.vid { box-sizing: border-box; margin: 0; position: relative; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 20px 40px rgba(0,0,0,0.35); background: #424769; }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.vid-v { width: calc((100% - 66px) / 4); aspect-ratio: 9 / 16; }
.vid-l3 { width: calc((100% - 44px) / 3); aspect-ratio: 16 / 9; }
.vid-l2 { width: calc((100% - 22px) / 2); aspect-ratio: 16 / 9; }
@media (max-width: 1000px) { .vid-v { width: calc((100% - 44px) / 3); } .vid-l3 { width: calc((100% - 22px) / 2); } }
@media (max-width: 640px) { .vid-groups { gap: 48px; } .vid-group h3 { font-size: 24px; } .vid-row { gap: 18px; } .vid-row + .vid-row { margin-top: 18px; } .vid-v, .vid-l3, .vid-l2 { width: 100%; } }