/* HD Home — front-page additions on top of the services hub stylesheet. Bump HDHM_VER on change. */

/* Page chrome: the containers on the front page are edge to edge like the hub's. */
.hdhm-page #main { padding-top: 0 !important; padding-bottom: 0 !important; }
.hdhm-page .hdsv-container, .hdhm-page .hdsv-container .fusion-builder-row, .hdhm-page .hdsv-container .fusion-layout-column, .hdhm-page .hdsv-container .fusion-column-wrapper { overflow: visible !important; }

/* ---------------- Hero: full height, a caption for the photo ---------------- */
.hdhm .hdhm-hero { min-height: max(680px, var(--hd-vh, 100vh)); }
.hdhm-hero__title { max-width: 16ch; }
/* Bright photos (snow, sky) need a little more shade behind the copy. */
.hdhm .hdhm-hero .hdsv-hero__shade::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 0% 70%, rgba(0, 27, 68, .55) 0%, rgba(0, 27, 68, 0) 60%); }
.hdhm .hdhm-hero .hdsv-eyebrow { text-shadow: 0 1px 12px rgba(0, 27, 68, .65); }
.hdhm .hdhm-hero .hdsv-hero__lede { text-shadow: 0 1px 18px rgba(0, 27, 68, .5); }
.hdhm .hdsv-hero__photo { animation-duration: 34s; }
.hdhm-cap { position: absolute; right: clamp(16px, 3vw, 40px); bottom: 24px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 13px 7px 9px; border-radius: 999px; background: rgba(0, 27, 68, .38); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: rgba(255, 255, 255, .85); font-size: 12.5px; line-height: 1; letter-spacing: .02em; opacity: 0; transform: translateY(8px); transition: opacity .8s .9s, transform .8s .9s cubic-bezier(.2, .7, .2, 1); }
.hdhm-cap.is-on { opacity: 1; transform: none; }
.hdhm-cap .hdsv-i { color: var(--ice); }
/* Tagline (Oct 4, 2026): the brand kit's outline "DESIGN. DEVELOP. DELIVER." under the headline. ~36 px tall on
   desktop (viewBox 1072.6 x 60), never wider than the column, scaling down on phones. */
.hdhm .hdhm-hero .hdsv-hero__title { margin-bottom: 18px !important; }
.hdhm .hdhm-hero .hdsv-facts { margin-top: clamp(36px, 3.4vw, 46px); } /* gives back most of the tagline's height */
.hdhm .hdhm-hero .hdhm-tagline { margin: 0 0 26px !important; padding: 0; line-height: 0; width: min(100%, 650px); }
.hdhm-tagline__svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 1px 10px rgba(0, 27, 68, .45)); }
.hdhm-tagline__txt { display: block; font-size: clamp(18px, 2.4vw, 32px); font-weight: 700; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; color: #fff; }
@media (max-width: 700px) { .hdhm .hdhm-hero .hdsv-hero__title { margin-bottom: 16px !important; } .hdhm .hdhm-hero .hdhm-tagline { margin-bottom: 22px !important; } }

/* ---------------- Services: four across ---------------- */
.hdhm .hdhm-svcs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hdhm .hdhm-svcs .hdsv-svc { min-height: 460px; }
.hdhm .hdhm-svcs .hdsv-svc__name { font-size: clamp(22px, 1.9vw, 27px); }
.hdhm.is-js .hdhm-svcs .hdsv-svc.hdsv-rv:nth-child(4) { transition-delay: .24s; }
.hdhm .hdsv-sec--services { padding-bottom: clamp(70px, 8vw, 110px); }
.hdhm .hdsv-also { margin-top: 40px; }

/* ---------------- Drone showcase: a slow two-way reel of our aerials ---------------- */
.hdhm-air { position: relative; isolation: isolate; overflow: hidden; padding: clamp(80px, 9vw, 130px) 0 clamp(70px, 8vw, 110px); background: linear-gradient(180deg, #001b44 0%, #04224f 60%, #001b44 100%); color: #fff; }
.hdhm-air__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hdhm-air__glow i { position: absolute; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; border-radius: 50%; filter: blur(90px); opacity: .35; animation: hdsv-drift 26s ease-in-out infinite alternate; }
.hdhm-air__glow i:nth-child(1) { left: -18%; top: -30%; background: radial-gradient(closest-side, #03a9f4, transparent); }
.hdhm-air__glow i:nth-child(2) { right: -20%; bottom: -40%; background: radial-gradient(closest-side, #3ecfb2, transparent); animation-delay: -12s; }
.hdhm-air__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: end; margin-bottom: clamp(44px, 5vw, 64px); }
.hdhm-air h2 { margin: 0; font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 600; line-height: 1.06; color: #fff; text-wrap: balance; }
.hdhm-air__intro p { margin: 0 0 26px; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, .8); }
.hdhm-btn--line { border-color: rgba(255, 255, 255, .55); color: #fff !important; }
.hdhm-btn--line:hover { background: #fff; border-color: #fff; color: var(--navy) !important; box-shadow: 0 0 0 3px rgba(179, 224, 242, .35), 0 0 30px rgba(3, 169, 244, .35); }

.hdhm-reel { display: grid; gap: 16px; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.hdhm-reel__row { overflow: hidden; }
.hdhm-reel__track { display: flex; gap: 16px; width: max-content; animation: hdhm-reel 90s linear infinite; }
.hdhm-reel__row--rev .hdhm-reel__track { animation-direction: reverse; animation-duration: 110s; }
.hdhm-reel:hover .hdhm-reel__track, .hdhm-reel.is-paused .hdhm-reel__track { animation-play-state: paused; }
@keyframes hdhm-reel { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - 8px), 0, 0); } }
.hdhm-reel__ph { position: relative; flex: none; display: block; width: clamp(240px, 24vw, 380px); aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #0a2757; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7); transition: transform .5s var(--ease), box-shadow .5s; }
.hdhm-reel__ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease), filter .5s; }
.hdhm-reel__ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); pointer-events: none; }
.hdhm-reel__ph:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px rgba(179, 224, 242, .6), 0 0 34px rgba(3, 169, 244, .45); }
.hdhm-reel__ph:hover img { transform: scale(1.1); }

.hdhm-uses { list-style: none; margin: clamp(44px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hdhm-uses a { display: grid; gap: 4px; height: 100%; padding: 20px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(179, 224, 242, .16); color: #fff; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s, background-color .3s; }
.hdhm-uses span { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 10px; border-radius: 13px; background: rgba(3, 169, 244, .16); color: var(--ice); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), background-color .3s, color .3s; }
.hdhm-uses span .hdsv-i { width: 22px; height: 22px; }
.hdhm-uses b { font-size: 17px; font-weight: 600; }
.hdhm-uses small { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .7); }
.hdhm-uses a:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .08); border-color: rgba(179, 224, 242, .45); box-shadow: 0 0 30px rgba(3, 169, 244, .25); }
.hdhm-uses a:hover span { transform: rotate(-8deg) scale(1.06); background: var(--ice); color: var(--navy); }

/* ---------------- Latest builds (portfolio module) keeps its own look ---------------- */
.hdhm-work { position: relative; }

/* ---------------- Live demos: four compact cards ---------------- */
.hdhm-demos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hdhm-demo { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, .06); border: 1px solid rgba(179, 224, 242, .16); color: #fff; transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; }
.hdsv.is-js .hdhm-demo.hdsv-rv:nth-child(2) { transition-delay: .08s; }
.hdsv.is-js .hdhm-demo.hdsv-rv:nth-child(3) { transition-delay: .16s; }
.hdsv.is-js .hdhm-demo.hdsv-rv:nth-child(4) { transition-delay: .24s; }
.hdhm-demo__ph { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #0a2757; }
.hdhm-demo__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.hdhm-demo__badge { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(0, 27, 68, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.hdhm-demo__badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: hdsv-pulse 1.8s infinite; }
.hdhm-demo__body { display: grid; gap: 6px; padding: 18px 20px 20px; flex: 1; }
.hdhm-demo__body small { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--aqua); }
.hdhm-demo__body b { font-size: 19px; font-weight: 600; line-height: 1.25; }
.hdhm-demo__go { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 10px; font-size: 13.5px; color: var(--ice); }
.hdhm-demo:hover { transform: translateY(-6px); border-color: rgba(179, 224, 242, .5); box-shadow: 0 0 0 1px rgba(179, 224, 242, .3), 0 0 40px rgba(3, 169, 244, .3); }
.hdhm-demo:hover .hdhm-demo__ph img { transform: scale(1.07); }
.hdhm-more { margin: 40px 0 0; text-align: center; }
.hdhm-more a { display: inline-flex; align-items: center; gap: 8px; color: var(--ice); font-weight: 600; border-bottom: 1px solid rgba(179, 224, 242, .35); padding-bottom: 3px; transition: color .25s, border-color .25s; }
.hdhm-more a:hover { color: #fff; border-color: #fff; }

/* ---------------- Made in Juneau ---------------- */
.hdhm .hdhm-local { background: #fff; padding-bottom: clamp(30px, 4vw, 60px); }
.hdhm-local__band { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; min-height: 460px; padding: clamp(36px, 5vw, 64px); border-radius: 28px; color: #fff; background: var(--navy); box-shadow: 0 40px 80px -40px rgba(0, 27, 68, .6); }
.hdhm-local__photo { position: absolute; inset: 0; z-index: -2; }
.hdhm-local__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
@supports (animation-timeline: view()) {
	.hdhm-local__photo img { animation: hdsv-par linear both; animation-timeline: view(); animation-range: cover; }
}
.hdhm-local__band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 27, 68, .92) 0%, rgba(0, 27, 68, .55) 50%, rgba(0, 27, 68, .1) 100%), linear-gradient(90deg, rgba(0, 27, 68, .55), transparent 70%); }
.hdhm-local__copy h2 { margin: 0 0 14px; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 600; line-height: 1.08; color: #fff; }
.hdhm-local__copy p { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, .85); max-width: 34em; }
.hdhm-local__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hdhm-local__facts li { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(0, 27, 68, .38); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .3s var(--ease), border-color .3s; }
.hdhm-local__facts li:hover { transform: translateX(-4px); border-color: rgba(179, 224, 242, .45); }
.hdhm-local__facts span { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(62, 207, 178, .16); color: var(--aqua); }
.hdhm-local__facts span .hdsv-i { width: 20px; height: 20px; }
.hdhm-local__facts b { font-size: 16px; font-weight: 600; }
.hdhm-local__facts small { font-size: 13.5px; color: rgba(255, 255, 255, .72); }

/* ---------------- Articles ---------------- */
.hdhm .hdhm-arts { background: var(--mist); }
.hdhm-arts__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 48px); }
.hdhm-arts__head h2 { margin: 0; font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 600; line-height: 1.1; color: var(--navy); max-width: 18ch; }
.hdhm-arts__head .hdsv-eyebrow { margin-bottom: 14px; }
.hdhm .hdhm-arts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; font-size: inherit; }

/* ---------------- Closing call to action ---------------- */
.hdhm-cta .hdsv-cta__photo img { object-position: center 60%; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
	.hdhm .hdhm-svcs, .hdhm-demos, .hdhm-uses { grid-template-columns: 1fr 1fr; }
	.hdhm .hdhm-svcs .hdsv-svc:last-child:nth-child(odd) { grid-column: auto; }
	.hdhm-local__band { grid-template-columns: 1fr; }
	.hdhm .hdhm-arts__grid { grid-template-columns: 1fr 1fr; }
	.hdhm .hdhm-arts__grid > :nth-child(3) { display: none; }
}
@media (max-width: 900px) {
	.hdhm-air__head { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 700px) {
	.hdhm .hdhm-hero { min-height: calc(var(--hd-vh, 100vh) * 1); }
	.hdhm .hdhm-hero .hdsv-hero__shade::after { background: linear-gradient(0deg, rgba(0, 27, 68, .88) 0%, rgba(0, 27, 68, .5) 55%, rgba(0, 27, 68, .3) 100%); }
	.hdhm-cap { display: none; }
	.hdhm .hdhm-svcs, .hdhm-demos, .hdhm-uses { grid-template-columns: 1fr; }
	.hdhm .hdhm-svcs .hdsv-svc { min-height: 400px; }
	.hdhm-reel__ph { width: 240px; }
	.hdhm-local__band { padding: 28px 22px; min-height: 520px; border-radius: 22px; }
	.hdhm-arts__head { flex-direction: column; align-items: flex-start; }
	.hdhm .hdhm-arts__grid { grid-template-columns: 1fr; }
	.hdhm .hdhm-arts__grid > :nth-child(3) { display: block; }
}
@media (prefers-reduced-motion: reduce) {
	.hdhm-reel__track { animation: none; }
	.hdhm-reel__row { overflow-x: auto; }
}

/* Avada's responsive typography sizes bare h2s with !important; these headings keep their own scale. */
.hdhm .hdhm-air h2 { font-size: clamp(2.1rem, 4vw, 3.4rem) !important; line-height: 1.06 !important; font-weight: 600 !important; }
.hdhm .hdhm-local__copy h2 { font-size: clamp(2rem, 3.6vw, 3rem) !important; line-height: 1.08 !important; font-weight: 600 !important; }
.hdhm .hdhm-arts__head h2 { font-size: clamp(2rem, 3.4vw, 2.8rem) !important; line-height: 1.1 !important; font-weight: 600 !important; }