/* SkyHi — location / SEO landing pages (e.g. drone-photography-leeds.html).
   Loads after style.css + about.css and reuses their sections (sec, svc cards, why list, pano band, CTA).
   Only the parts unique to location pages live here, so every new area page can share this file. */

/* ---------- hero ---------- */
.loc-hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end;isolation:isolate}
.loc-hero-media{position:absolute;inset:0;z-index:-2;will-change:transform}
.loc-hero-media img{width:100%;height:100%;object-fit:cover;animation:kenburns 26s ease-in-out infinite alternate}
.loc-hero .reel-copy{max-width:1100px}
.loc-hero .reel-copy h1{font-size:clamp(56px, 8.8vw, 128px)}
.loc-hero .scroll-hint{z-index:2;bottom:clamp(34px, 5vh, 52px)}
.hero-cap{position:absolute;right:calc(var(--gutter) + 40px);bottom:clamp(44px, 6vh, 62px);margin:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,245,245,.7);text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* breadcrumbs */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:0 0 18px;padding:0;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.crumbs li{display:flex;align-items:center;color:var(--white)}
.crumbs li + li::before{content:"";width:18px;height:1px;background:var(--orange);margin:0 12px}
.crumbs a{opacity:.75;transition:opacity .2s}
.crumbs a:hover{opacity:1}
.crumbs [aria-current]{color:var(--orange-text)}

/* ---------- intro ---------- */
.loc-portrait img{aspect-ratio:2/3}
.glance{margin-top:6px;padding:26px 28px;border-radius:8px;background:rgba(245,245,245,.04);border:1px solid rgba(245,245,245,.12);border-left:2px solid var(--orange)}
.glance h3{margin:0 0 14px;font-size:26px}
.glance dl{margin:0;display:grid;gap:10px}
.glance dl div{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:baseline}
.glance dt{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-text)}
.glance dd{margin:0;font-size:15px;line-height:1.5;color:var(--white)}

/* ---------- why ---------- */
.why-intro{margin:-8px 0 28px;max-width:440px;font-size:clamp(15px, 1.15vw, 17px)}
.why-img{position:relative}
.why-img::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top, rgba(28,29,32,.7), transparent);pointer-events:none}
.why-img figcaption{z-index:1;position:absolute;left:14px;bottom:12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--white);text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* ---------- safe, legal & insured ---------- */
.sec-safe{background:var(--ink)}
.safe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px, 2vw, 28px)}
.safe{padding:clamp(26px, 3vw, 40px);border-radius:8px;background:rgba(245,245,245,.035);border:1px solid rgba(245,245,245,.1);transition:border-color .4s, transform .4s}
.safe:hover{border-color:rgba(230,84,22,.6);transform:translateY(-3px)}
.safe svg{width:44px;height:44px;fill:none;stroke:var(--orange);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:26px}
.safe p{margin:0;font-size:15px;line-height:1.6}
.safe-grid .safe:nth-child(2){transition-delay:.08s}
.safe-grid .safe:nth-child(3){transition-delay:.16s}

/* ---------- guide prices ---------- */
.sec-prices{background:var(--charcoal)}
.sec-prices{padding-bottom:clamp(40px, 5vw, 70px)}
.sec-prices + .sec-areas{padding-top:clamp(40px, 5vw, 70px);border-top:1px solid rgba(245,245,245,.08)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px, 2vw, 28px)}
.price-amt-text{font-size:clamp(40px, 3.8vw, 58px) !important;white-space:nowrap;align-items:flex-end;padding-bottom:4px}
.price .price-amt{height:clamp(58px, 6.4vw, 88px)}
.price{position:relative;padding:clamp(28px, 3.4vw, 46px);border-radius:8px;background:rgba(245,245,245,.035);border:1px solid rgba(245,245,245,.12)}
.price-feature{border-color:rgba(230,84,22,.65);background:linear-gradient(160deg, rgba(230,84,22,.12), rgba(230,84,22,0) 60%)}
.price-label{margin:0 0 10px !important;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--orange-text) !important}
.price-amt{margin:0 0 16px !important;font-family:var(--font-display);font-size:clamp(64px, 7vw, 96px);line-height:.9;color:var(--white) !important;display:flex;align-items:baseline;gap:12px}
.price-amt span{font-family:var(--font-body);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--beige)}
.price-note{margin:0 !important;font-size:15px;line-height:1.6;max-width:340px}
.price-extra{margin:26px 0 0;font-size:14px;opacity:.85}
.price-extra a{color:var(--white);border-bottom:1px solid var(--orange);margin-left:6px}
.price-grid .price:nth-child(2){transition-delay:.08s}
.price-grid .price:nth-child(3){transition-delay:.16s}

/* ---------- areas ---------- */
.areas-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px, 7vw, 110px);align-items:start}
.areas-copy{font-size:clamp(15px, 1.2vw, 18px);max-width:460px;margin:0}
.areas-lists{display:grid;gap:34px}
.areas-lists h3{font-size:24px;margin-bottom:14px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:10px 16px;border:1px solid rgba(245,245,245,.22);border-radius:999px;color:var(--white);transition:border-color .25s, background .25s}
.chips li:hover{border-color:var(--orange);background:rgba(230,84,22,.08)}

.chips a{color:inherit;border-bottom:1px solid var(--orange)}
.world-img{position:relative;margin:34px 0 0;overflow:hidden;border-radius:6px;max-width:460px}
.world-img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.world-img::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top, rgba(28,29,32,.7), transparent);pointer-events:none}
.world-img figcaption{position:absolute;z-index:1;left:14px;bottom:12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--white)}

/* ---------- FAQ ---------- */
.sec-faq{background:var(--ink)}
.faq-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px, 7vw, 110px);align-items:start}
.faq-side{position:sticky;top:110px}
.faq-note{font-size:16px;max-width:360px}
.faq-note a{color:var(--white);border-bottom:1px solid var(--orange)}
.updated{font-size:11px !important;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-top:24px}
.faq{border-top:1px solid rgba(245,245,245,.14)}
.faq:last-child{border-bottom:1px solid rgba(245,245,245,.14)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;padding:0;font-family:var(--font-body);font-weight:600;font-size:clamp(17px, 1.4vw, 20px);line-height:1.35;letter-spacing:0;color:var(--white);transition:color .2s}
.faq summary:hover h3{color:var(--orange-text)}
.faq summary::after{content:"";flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid rgba(245,245,245,.3);
  background:linear-gradient(var(--white),var(--white)) center/12px 1.5px no-repeat, linear-gradient(var(--white),var(--white)) center/1.5px 12px no-repeat;transition:transform .35s, border-color .25s, background-color .25s}
.faq[open] summary::after{transform:rotate(135deg);border-color:var(--orange);background-color:var(--orange)}
.faq-a{overflow:hidden}
.faq-a p{margin:0 0 26px;max-width:640px;font-size:16px;line-height:1.7}
.faq summary:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:4px}

/* ---------- responsive ---------- */
@media (max-width: 860px){
  .areas-grid,.faq-grid{grid-template-columns:1fr}
  .faq-side{position:relative;top:0}
  .safe-grid,.price-grid{grid-template-columns:1fr}
  .hero-cap{display:none}
  .loc-portrait img{aspect-ratio:4/5}
}
@media (max-width: 560px){
  .glance{padding:22px 20px}
  .glance dl div{grid-template-columns:1fr;gap:2px}
  .loc-hero .reel-copy .cta-row .btn{flex:1 1 auto}
  .crumbs li:nth-child(2){display:none}
}
@media (prefers-reduced-motion: reduce){
  .loc-hero-media img{animation:none}
}