/* Nikola Landscape Lighting - Bluebird page structure (2026-09-13).
   Layout only: every block below was moved from the page's own markup, nothing re-typed.
   Colours come from the site's own tokens (--background, --card, --primary, --border). */
.bb-band{position:relative;padding:5rem 0;overflow-x:clip}
.bb-band.bb-tight{padding:3.25rem 0}
.bb-t-bg{background:hsl(var(--background))}
.bb-t-card{background:hsl(var(--card))}
.bb-t-deep{background:hsl(220 24% 4%)}
.bb-wrap{max-width:1240px;margin-left:auto;margin-right:auto}
.bb-wrap > section{padding-top:0!important;padding-bottom:0!important;background:none!important;border:0!important}
.bb-wrap > section > .container{padding-left:0;padding-right:0}
.bb-head{text-align:center;max-width:46rem;margin:0 auto 2.75rem}
.bb-head h2{margin-bottom:.75rem}

/* 2-column rows: photo | card, then card | photo */
.bb-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3.5rem;align-items:center}
.bb-row.bb-row-rev{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.bb-row.bb-row-rev > .bb-media{order:2}
.bb-row + .bb-row{margin-top:3.5rem}
.bb-media{position:relative;margin:0}
.bb-media > img,.bb-media .bb-photo{display:block;width:100%;height:520px;object-fit:cover;border-radius:1.25rem;border:1px solid hsl(var(--border))}
.bb-media .aspect-\[4\/3\]{aspect-ratio:auto!important;height:520px}
.bb-media .aspect-\[4\/3\] img{height:100%}
.bb-card{border-radius:1.25rem;padding:2.5rem;min-width:0}
.bb-card-dark{background:var(--gradient-card);border:1px solid hsl(var(--border));border-left:3px solid hsl(var(--primary));box-shadow:var(--shadow-card)}
.bb-card-plain{padding:.5rem 0}
.bb-card > h2,.bb-card > div > h2{font-size:clamp(1.75rem,2.6vw,2.5rem)!important;line-height:1.15;margin-bottom:1rem!important}
.bb-card .mb-20{margin-bottom:0!important}
.bb-card p{max-width:none!important}
.bb-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem;align-items:start}

/* icon rows made from the page's own stat tiles / feature cards */
.bb-rows{display:grid;gap:.9rem;margin-top:1.5rem;padding:0;list-style:none}
.bb-rows > *{display:block;position:relative;background:hsl(var(--background)/.55)!important;border:1px solid hsl(var(--border))!important;border-radius:.85rem!important;padding:.85rem 1.1rem .85rem 2.3rem!important;text-align:left!important}
.bb-rows > *::before{content:"";position:absolute;left:1.05rem;top:1.3rem;width:.55rem;height:.55rem;border-radius:999px;background:hsl(var(--primary))}
.bb-rows > * > *{margin:0!important}
.bb-rows > * > * + *{margin-top:.2rem!important}
.bb-rows .flex{display:block}
.bb-rows p,.bb-rows h3{font-size:1rem!important;line-height:1.45}
.bb-rows .gradient-card{background:none;border:0;padding:0;text-align:left}
.bb-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:1.5rem}
.bb-stats > *{margin:0!important}
.bb-stats .gradient-card{padding:1rem!important;text-align:left}
.bb-stats .gradient-card p:first-child{font-size:1.15rem!important}

/* disclosure for long copy */
.bb-more{margin-top:1.25rem;border-top:1px solid hsl(var(--border));padding-top:1rem}
.bb-more > summary{cursor:pointer;list-style:none;color:hsl(var(--primary));font-weight:600;font-family:Montserrat,system-ui,sans-serif;font-size:.95rem;display:inline-flex;align-items:center;gap:.5rem}
.bb-more > summary::-webkit-details-marker{display:none}
.bb-more > summary::after{content:"+";font-size:1.2rem;line-height:1}
.bb-more[open] > summary::after{content:"\2212"}
.bb-more > summary:focus-visible{outline:2px solid hsl(var(--primary));outline-offset:3px;border-radius:4px}
.bb-more-body{margin-top:1rem}
.bb-more-body > * + *{margin-top:1rem}

/* chips: "<Service> in <Town>" */
.bb-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.25rem 0}
.bb-sub{margin-top:1.75rem}
.bb-sub h3{font-family:"Playfair Display",Georgia,serif;font-size:1.35rem!important;margin-bottom:.6rem!important}
.bb-related-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-top:2.5rem}
.bb-related-cards .h-48,.bb-related-cards .h-64{height:9rem!important}
.bb-related-cards > div{margin:0}

/* compact gallery */
.bb-tiles{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem!important;columns:auto!important}
.bb-tiles > *{margin:0!important;aspect-ratio:4/3!important;height:auto!important;overflow:hidden;border-radius:.75rem}
.bb-tiles > * img{width:100%!important;height:100%!important;object-fit:cover}
.bb-tiles.bb-tiles-sq > *{aspect-ratio:1/1!important}
.bb-gal-part + .bb-gal-part{margin-top:3rem}
.bb-gal-part .mb-16,.bb-gal-part .mb-12{margin-bottom:1.5rem!important}
.bb-gal-more{margin-top:1rem}
.bb-gal-more > summary{margin:0 auto;display:flex;justify-content:center;width:max-content;border:1px solid hsl(var(--primary));border-radius:999px;padding:.6rem 1.4rem}
.bb-gal-more > summary::after{content:none}
.bb-gal-more .bb-tiles{margin-top:1rem}

/* how it works: dark band, white step cards */
.bb-how{background:hsl(220 24% 4%)}
.bb-steps{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem!important;counter-reset:bbstep;max-width:none!important;margin:0!important}
.bb-steps.bb-steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bb-step{counter-increment:bbstep;background:#fff;color:#12151b;border-radius:1rem;padding:1.6rem 1.4rem 1.7rem;text-align:center;box-shadow:0 18px 40px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center}
.bb-step .bb-stepnum{display:inline-block;background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-radius:999px;padding:.3rem .95rem;font:600 .78rem/1.2 Montserrat,system-ui,sans-serif!important;letter-spacing:.04em;margin:0 0 1rem!important}
.bb-step .bb-stepnum:empty::before{content:"Step : " counter(bbstep,decimal-leading-zero)}
.bb-step .bb-stepnum:not(:empty)::before{content:"Step : "}
.bb-step h3{color:#12151b!important;font-size:1.2rem!important;margin:0 0 .5rem!important;transform:none!important}
.bb-step p{color:#4a5160!important;font-size:.92rem!important;line-height:1.55;margin:0!important}
.bb-step svg{display:none}

/* mid strip + service areas + directions */
.bb-strip{padding:3.5rem 0}
.bb-strip .mb-12{margin-bottom:1.75rem!important}
.bb-areas{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:3rem;align-items:center}
.bb-areas.bb-areas-solo{grid-template-columns:minmax(0,1fr)}
.bb-areas-map iframe{display:block;width:100%!important;height:380px!important;border-radius:1rem}
.bb-areas-map > div > p{margin-top:.6rem}
.bb-areas-map img{display:block;width:100%;height:380px;object-fit:cover;border-radius:1rem;border:1px solid hsl(var(--border))}
.bb-areas h2{margin-bottom:1rem!important}
.bb-dirs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem!important}
.bb-dir-card{background:var(--gradient-card);border:1px solid hsl(var(--border));border-radius:1rem;padding:1rem 1rem 1.25rem}
.bb-dir-card iframe{height:230px!important}
.bb-from{display:block;font:600 .78rem/1.2 Montserrat,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:hsl(var(--primary));margin:0 0 .75rem}
.bb-band .nk-dir{margin-top:3rem;border-radius:1.25rem;overflow:hidden}

/* closing CTA */
.bb-close{padding:4.5rem 0!important}
.bb-close-btns{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center}
.bb-close-btns > div{margin:0}
.bb-call{display:inline-flex;align-items:center;justify-content:center;height:3rem;padding:0 2rem;border-radius:.375rem;background:#fff;color:#12151b;font:600 1rem/1 Montserrat,system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.bb-call:hover{background:hsl(40 30% 92%)}

/* FAQ band */
.bb-faq .max-w-3xl{max-width:56rem}

@media (max-width:1023px){
  .bb-band{padding:3.5rem 0}
  .bb-row,.bb-row.bb-row-rev,.bb-areas,.bb-duo{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .bb-row.bb-row-rev > .bb-media{order:0}
  .bb-media > img,.bb-media .bb-photo,.bb-media .aspect-\[4\/3\]{height:auto!important;aspect-ratio:4/3!important;max-height:420px}
  .bb-card{padding:1.6rem}
  .bb-steps,.bb-steps.bb-steps-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bb-dirs{grid-template-columns:minmax(0,1fr)}
  .bb-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bb-areas-map iframe,.bb-areas-map img{height:300px!important}
}
@media (max-width:640px){
  .bb-steps,.bb-steps.bb-steps-4{grid-template-columns:minmax(0,1fr)}
  .bb-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bb-stats{grid-template-columns:minmax(0,1fr)}
  .bb-card{padding:1.25rem}
}
/* a gallery tile used as the row photo keeps its own hover caption */
.bb-media > div{position:relative;height:520px;border-radius:1.25rem;overflow:hidden;aspect-ratio:auto!important;border:1px solid hsl(var(--border))}
.bb-media > div > img{width:100%!important;height:100%!important;object-fit:cover}
.bb-areas-map > div.group{height:380px;border-radius:1rem;overflow:hidden;position:relative;aspect-ratio:auto!important}
.bb-areas-map > div.group > img{width:100%;height:100%;object-fit:cover}
@media (max-width:1023px){.bb-media > div{height:auto;aspect-ratio:4/3!important;max-height:420px}.bb-areas-map > div.group{height:300px}}
/* reviews: one sideways-scrolling row (Bluebird review slider, no script) */
.bb-reviews .bb-slide{display:grid!important;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:calc((100% - 3rem)/3);gap:1.5rem!important;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-color:hsl(var(--primary)) transparent}
.bb-reviews .bb-slide > *{scroll-snap-align:start}
.bb-reviews .mb-12,.bb-reviews .mb-16{margin-bottom:2rem!important}
.bb-gal-in{margin-top:3.5rem}
.bb-gal-head h2{font-size:1.9rem!important}
.bb-band .nk-dir{padding:0!important}
.bb-band .nk-dir .nk-dir-in{padding:2.25rem 1rem!important}
.bb-dir-card iframe{height:200px!important}
@media (max-width:1023px){.bb-reviews .bb-slide{grid-auto-columns:calc((100% - 1.5rem)/2)}}
@media (max-width:640px){.bb-reviews .bb-slide{grid-auto-columns:86%}}
.bb-list{display:grid;gap:1.1rem;margin-top:1rem}
.bb-list h3{font-size:1.15rem!important;margin-bottom:.25rem!important}
.bb-media > div.relative:not(.group){overflow:visible;border:0;height:auto}
.bb-media > div.relative:not(.group) > img{display:block;width:100%;height:520px;object-fit:cover;border-radius:1.25rem}
@media (max-width:1023px){.bb-media > div.relative:not(.group){aspect-ratio:auto!important;max-height:none}.bb-media > div.relative:not(.group) > img{height:auto;aspect-ratio:4/3;max-height:420px}}
/* Gemstone app widget: let its button columns shrink instead of pushing past the viewport */
[data-bb="app-features"] .grid > *,[data-bb="app-features"] button.group{min-width:0}
@media (max-width:1180px){[data-bb="app-features"] .grid.items-center{grid-template-columns:minmax(0,1fr)!important}}
/* service-areas hub: "<Service> in <Town>" pills stay on one line */
.nk-places .nk-place-b span{font-size:.75rem!important;padding-left:.75rem!important;padding-right:.75rem!important;white-space:nowrap;max-width:100%}
@media (max-width:1180px) and (min-width:641px){.nk-places .nk-place-b span{white-space:normal}}
