/* INSIDE package cards and dialogs. Scoped to the pricing section. */
.pricing-section,.package-dialog{font-family:Manrope,Arial,sans-serif}
.pricing-section{background:#141e25;color:#f3f3ef;padding:88px 0 78px;scroll-margin-top:24px}
.pricing-container{width:min(100% - 104px,1536px);margin-inline:auto}
.pricing-heading{margin-bottom:36px}
.pricing-eyebrow{font-size:10px;line-height:1.4;letter-spacing:.13em;text-transform:uppercase;color:#a9b2b8;margin:0 0 19px;font-weight:500}
.pricing-heading h2{font:600 clamp(29px,3.2vw,48px)/1.18 Manrope,Arial,sans-serif;letter-spacing:-.025em;margin:0 0 18px;max-width:1000px}
.pricing-intro{font-size:15px;line-height:1.6;color:#c3c9cd;margin:0;max-width:720px}
.pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pricing-card{overflow:hidden;display:flex;flex-direction:column;background:#202b33;border:1px solid #ffffff17;border-radius:7px;position:relative;isolation:isolate;transition:transform .32s cubic-bezier(.2,.65,.25,1),border-color .35s ease,background .35s ease,box-shadow .35s ease}
.pricing-card:hover,.pricing-card:focus-within{border-color:#dce6ed55;background:#243039;box-shadow:0 8px 28px #0002,0 0 28px #dce6ed12}
.pricing-image-wrap{aspect-ratio:1.46;overflow:hidden;background:#29343d}
.pricing-image{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.55);transition:transform .6s ease}
.pricing-image-modern{filter:saturate(.55) brightness(.72)}
.pricing-card:hover .pricing-image{transform:none}
.pricing-card-content{display:flex;flex-direction:column;flex:1;padding:24px 22px 22px}
.pricing-card-index{font-size:9px;line-height:1.4;letter-spacing:.11em;color:#b4bec5;margin:0 0 14px;font-weight:500}
.pricing-card h3{font:600 clamp(16px,1.45vw,22px)/1.25 Manrope,Arial,sans-serif;letter-spacing:-.01em;margin:0 0 17px}
.pricing-card-price{font-size:clamp(27px,2.5vw,37px);font-weight:500;line-height:1.15;letter-spacing:-.045em;white-space:nowrap;margin:0 0 19px}
.pricing-card-price span{font-size:12px;font-weight:400;letter-spacing:0;color:#b8c1c7}
.pricing-card-description{font-size:14px;line-height:1.65;color:#c3cbd0;margin:0 0 28px;max-width:290px}
.pricing-details-button{display:flex;align-items:center;justify-content:center;min-height:46px;width:100%;margin-top:auto;background:transparent;color:#f1f2ee;border:1px solid #a8b3bb66;border-radius:3px;font:600 13px Manrope,Arial,sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pricing-details-button:hover{background:#eeeee8;color:#1a2831;border-color:#eeeee8}
.pricing-details-button:focus-visible,.package-dialog :focus-visible{outline:2px solid #f3f3ed;outline-offset:4px}
.pricing-section-notes{display:flex;justify-content:space-between;gap:32px;margin-top:24px;color:#9faab2}
.pricing-section-notes p{font-size:11px;line-height:1.7;margin:0;max-width:650px}
.pricing-section-notes p:last-child{max-width:300px;text-align:right}
.package-dialog{width:min(900px,calc(100% - 56px));max-width:none;max-height:calc(100dvh - 56px);margin:auto;padding:0;border:1px solid #ffffff25;border-radius:9px;color:#f4f4ef;background:#1c272f;box-shadow:0 32px 100px #0006;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#58656d #1c272f}
.package-dialog[open]{animation:package-enter .22s ease-out both}
.package-dialog::backdrop{background:#080e14c9;backdrop-filter:blur(7px)}
.package-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;padding:29px 32px 23px;background:#1c272ff5;position:sticky;top:0;z-index:2;backdrop-filter:blur(10px)}
.package-dialog-eyebrow{font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#aab6bf;margin:0 0 10px}
.package-dialog h3{font:600 clamp(24px,3vw,33px)/1.18 Manrope,Arial,sans-serif;letter-spacing:-.025em;margin:0 0 11px}
.package-dialog h3:focus{outline:none}
.package-dialog-price{font-size:26px;font-weight:500;line-height:1.15;letter-spacing:-.035em;margin:0}
.package-dialog-price span{font-size:13px;letter-spacing:0;font-weight:400;color:#c7cfd3}
.package-dialog-close{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid #ffffff3b;border-radius:50%;background:transparent;color:#f4f4ef;cursor:pointer;transition:background .2s}
.package-dialog-close:hover{background:#ffffff14}
.package-dialog-content{padding:0 32px 32px}
.package-dialog-description{font-size:14px;line-height:1.7;color:#bfc8ce;margin:0 0 31px;max-width:720px}
.package-includes-title{font:600 12px/1.4 Manrope,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#f2f3ed;margin:0 0 26px}
.package-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:27px 35px}
.package-detail-group h4{font:600 12px/1.45 Manrope,Arial,sans-serif;letter-spacing:.045em;text-transform:uppercase;color:#d6dde0;margin:0 0 12px}
.package-detail-group ul{list-style:none;margin:0;padding:0}
.package-detail-group li{position:relative;padding-left:17px;font-size:14px;line-height:1.7;color:#bec8cf}
.package-detail-group li+li{margin-top:6px}
.package-detail-group li::before{content:'–';position:absolute;left:0;top:0;color:#81919c}
.package-dialog-notes{margin:32px 0 23px;padding-top:21px;border-top:1px solid #ffffff18}
.package-dialog-notes p{font-size:12px;line-height:1.7;color:#aebbc3;margin:0}
.package-dialog-notes p+p{margin-top:12px}
.package-dialog-contact{display:inline-flex;align-items:center;justify-content:center;min-height:48px;text-decoration:none;border-radius:3px;background:#f0efe8;color:#23313a;font-size:12px;font-weight:600;padding:14px 23px;transition:background .2s}
.package-dialog-contact:hover{background:#fff}
@keyframes package-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1150px){
 .pricing-container{width:calc(100% - 64px)}
 .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .pricing-card h3{font-size:21px}
 .pricing-card-price{font-size:36px}
 .pricing-card-content{padding:26px}
 .pricing-card-description{font-size:13px;max-width:none}
 .pricing-image-wrap{aspect-ratio:1.8}
}
@media(max-width:760px){
 .pricing-section{padding:65px 0 56px}
 .pricing-container{width:calc(100% - 40px)}
 .pricing-heading{margin-bottom:28px}
 .pricing-heading h2{font-size:29px;line-height:1.2;max-width:500px}
 .pricing-intro{font-size:13px;max-width:480px}
 .pricing-grid{gap:14px}
 .pricing-image-wrap{aspect-ratio:1.35}
 .pricing-card-content{padding:21px 18px 18px}
 .pricing-card h3{font-size:16px}
 .pricing-card-price{font-size:28px}
 .pricing-card-price span{font-size:10px}
 .pricing-card-description{font-size:11px}
 .pricing-section-notes{display:block;margin-top:22px}
 .pricing-section-notes p:last-child{text-align:left;margin-top:10px;max-width:none}
 .package-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);border-radius:6px}
 .package-dialog-header{padding:24px 22px 20px;gap:15px}
 .package-dialog h3{font-size:25px}
 .package-dialog-content{padding:0 22px 25px}
 .package-dialog-description{font-size:12px;margin-bottom:26px}
 .package-detail-grid{gap:25px;grid-template-columns:1fr}
 .package-detail-group h4{font-size:11px}
 .package-detail-group li{font-size:13px}
 .package-dialog-contact{width:100%;font-size:11px;padding-inline:12px}
 .package-dialog-close{width:38px;height:38px}
}
@media(max-width:530px){
 .pricing-grid{grid-template-columns:1fr;gap:22px}
 .pricing-image-wrap{aspect-ratio:1.65}
 .pricing-card-content{padding:23px}
 .pricing-card h3{font-size:20px}
 .pricing-card-price{font-size:35px}
 .pricing-card-price span{font-size:12px}
 .pricing-card-description{font-size:13px;margin-bottom:24px}
 .pricing-details-button{min-height:48px;font-size:12px}
 .package-dialog h3{font-size:22px}
 .package-dialog-price{font-size:25px}
}
@media(prefers-reduced-motion:reduce){.pricing-section *,.package-dialog *{transition:none!important}.package-dialog[open]{animation:none}}


/* A restrained light wash without drawing a custom cursor. */
.pricing-card::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 50% 0%,#f3f6f812,transparent 72%);opacity:0;pointer-events:none;transition:opacity .4s ease}
.pricing-card:hover::after,.pricing-card:focus-within::after{opacity:1}
@media(hover:none){.pricing-card:hover{background:#202b33;box-shadow:none;border-color:#ffffff17}.pricing-card:hover::after{opacity:0}}

@media(prefers-reduced-motion:reduce){.pricing-card::after{transition:none}}

/* Give the hovered package a small visual accent without changing the grid. */
@media(hover:hover) and (pointer:fine){
 .pricing-card:hover,.pricing-card:focus-within{transform:scale(1.025);z-index:2}
}

@media(prefers-reduced-motion:reduce){.pricing-card:hover,.pricing-card:focus-within{transform:none}}

/* The portfolio entry uses the same quiet outline treatment as package details. */
.pricing-works-link{text-decoration:none;gap:11px}
.pricing-works-link svg{flex:none;opacity:.85;transition:transform .25s}
@media(hover:hover) and (pointer:fine){.pricing-works-link:hover svg{transform:scale(1.07)}}
@media(prefers-reduced-motion:reduce){.pricing-works-link svg{transition:none}.pricing-works-link:hover svg{transform:none}}
