/* =====================================================================
   pergolas-patio-cabins.css  (full replacement)
   Scoped to body.service-pergola-page so no other page is affected.
   Hidden-until-reveal styles only switch on when the page's own JS has
   loaded (html.pa-ready), so photos can never stay invisible.
   ===================================================================== */
body:not(.home).service-page{padding-top:0}
body.service-pergola-page{
  --pe:cubic-bezier(.2,.7,.2,1);
  --po:#8b9d3b;--pod:#5f6f26;--pol:#c9d68a;--pdk:#0a1f17;--pmu:#68746b;--pam:#e2b468;--pamd:#a8741f;
  overflow-x:hidden;
}

/* ---------------- Hero (header overlays the video, as before) ---------------- */
body.service-pergola-page .service-detail-hero{position:relative;overflow:hidden;min-height:clamp(620px,88vh,900px)}
body.service-pergola-page .service-detail-hero .service-header{position:absolute;top:0;left:0;width:100%;z-index:5;background:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none;border:0}
body.service-pergola-page .service-detail-hero .service-header .logo,
body.service-pergola-page .service-detail-hero .service-header .nav > a{color:#fff}
body.service-pergola-page .service-detail-video{animation:paKen 28s ease-in-out infinite alternate}
@keyframes paKen{to{transform:scale(1.08)}}

/* sunlight through pergola slats: layer sits above the video, below the shade and text */
.pa-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pa-sun{position:absolute;inset:0;mix-blend-mode:screen;background:radial-gradient(42% 36% at 80% 14%,rgba(255,214,140,.45),transparent 70%);animation:paSun 9s ease-in-out infinite alternate}
@keyframes paSun{from{opacity:.65;transform:scale(1)}to{opacity:1;transform:scale(1.12)}}
.pa-slats{position:absolute;inset:-30% -12%;mix-blend-mode:screen;background:repeating-linear-gradient(115deg,rgba(255,226,170,0) 0 46px,rgba(255,226,170,.15) 46px 80px,rgba(255,226,170,0) 80px 150px);animation:paSlat 26s linear infinite}
@keyframes paSlat{to{transform:translateX(166px)}}
.pa-mote{position:absolute;bottom:-20px;width:6px;height:6px;border-radius:50%;background:rgba(255,236,190,.85);box-shadow:0 0 12px 4px rgba(255,226,170,.5);opacity:0;animation:paMote 17s linear infinite}
.pa-mote:nth-of-type(3){left:8%;animation-delay:0s}
.pa-mote:nth-of-type(4){left:22%;width:4px;height:4px;animation-delay:3s;animation-duration:21s}
.pa-mote:nth-of-type(5){left:38%;animation-delay:7s}
.pa-mote:nth-of-type(6){left:55%;width:8px;height:8px;animation-delay:1.5s;animation-duration:19s}
.pa-mote:nth-of-type(7){left:70%;width:4px;height:4px;animation-delay:9s;animation-duration:23s}
.pa-mote:nth-of-type(8){left:84%;animation-delay:5s}
.pa-mote:nth-of-type(9){left:93%;width:5px;height:5px;animation-delay:12s;animation-duration:20s}
@keyframes paMote{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}85%{opacity:.6}100%{transform:translate(46px,-105vh);opacity:0}}

/* hero text enters one line at a time (fill "backwards" keeps normal hover styles afterwards) */
body.service-pergola-page .service-detail-copy>*{animation:paIn 1s var(--pe) backwards}
body.service-pergola-page .service-detail-copy>*:nth-child(1){animation-delay:.15s}
body.service-pergola-page .service-detail-copy>*:nth-child(2){animation-delay:.3s}
body.service-pergola-page .service-detail-copy>*:nth-child(3){animation-delay:.45s}
body.service-pergola-page .service-detail-copy>*:nth-child(4){animation-delay:.6s}
body.service-pergola-page .service-detail-copy>*:nth-child(5){animation-delay:.75s}
@keyframes paIn{from{opacity:0;transform:translateY(28px)}}

/* ---------------- Shared section heading ---------------- */
.pa-types h2,.pa-coord h2,.pa-flow h2,.pa-gallery h2,.pa-faq h2,.pa-pair h2{font-size:clamp(38px,5.2vw,76px);line-height:.98;letter-spacing:-.06em;margin:14px 0 0;color:var(--pdk)}
.pa-types h2 em,.pa-flow h2 em,.pa-gallery h2 em,.pa-faq h2 em,.pa-pair h2 em{color:var(--po);font-style:normal}
.pa-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px 56px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.pa-head>p{margin:0;max-width:460px;justify-self:end;color:var(--pmu);font-size:17px;line-height:1.7}

/* ---------------- Three ways to shelter ---------------- */
.pa-types{padding:clamp(56px,7.5vw,108px) 0;background:#f7f0e3}
.pa-types-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pa-type{position:relative;padding:28px 26px 26px;border-radius:24px;background:#e5e9d2;border:1px solid rgba(10,31,23,.07);overflow:hidden;translate:0 0;transition:translate .5s var(--pe),box-shadow .5s var(--pe),border-color .5s var(--pe)}
.pa-type::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--po),var(--pam));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--pe)}
.pa-type:hover{translate:0 -8px;border-color:rgba(139,157,59,.6);box-shadow:0 28px 48px -26px rgba(10,31,23,.45)}
.pa-type:hover::before{transform:scaleX(1)}
.pa-type-ico{display:grid;place-items:center;width:60px;height:60px;margin-bottom:20px;border-radius:18px;background:var(--pdk);color:var(--pam);transition:background .5s var(--pe),color .5s var(--pe),transform .6s var(--pe)}
.pa-type-ico svg{width:28px;height:28px}
.pa-type:hover .pa-type-ico{background:var(--pam);color:var(--pdk);transform:rotate(-8deg) scale(1.08)}
.pa-type h3{margin:0 0 10px;font-size:24px;letter-spacing:-.03em;color:var(--pdk)}
.pa-type>p{margin:0 0 16px;color:var(--pmu);font-size:15.5px;line-height:1.7}
.pa-type ul{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid rgba(10,31,23,.12);display:grid;gap:9px}
.pa-type li{position:relative;padding-left:26px;color:var(--pdk);font-size:14.5px;font-weight:600}
.pa-type li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:var(--po)}
.pa-type li::after{content:"";position:absolute;left:5px;top:6px;width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

/* ---------------- Designed around the weather (dark, warm) ---------------- */
.pa-coord{position:relative;isolation:isolate;overflow:hidden;padding:clamp(60px,8vw,112px) 0;color:#fff;background:linear-gradient(160deg,#0a1f17 0%,#2a2113 58%,#0a1f17 100%)}
.pa-coord .service-kicker{color:var(--pam)}
.pa-coord h2{color:#fff}
.pa-coord h2 em{color:var(--pam);font-style:normal}
.pa-coord .pa-head>p{color:rgba(255,255,255,.74)}
.pc-bg i{position:absolute;z-index:-1;border-radius:50%;filter:blur(90px);pointer-events:none;animation:paDrift 26s ease-in-out infinite alternate}
.pc-bg i:nth-child(1){width:440px;height:440px;background:#c98a2c;opacity:.34;top:-130px;right:-90px}
.pc-bg i:nth-child(2){width:380px;height:380px;background:var(--po);opacity:.28;bottom:-150px;left:-110px;animation-duration:32s}
@keyframes paDrift{to{transform:translate(70px,46px) scale(1.16)}}
.pc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pc-card{position:relative;padding:26px 24px 24px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);overflow:hidden;translate:0 0;transition:translate .5s var(--pe),background .5s var(--pe),border-color .5s var(--pe),box-shadow .5s var(--pe)}
.pc-card::before{content:"";position:absolute;left:50%;top:-40%;width:120%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(circle,rgba(226,180,104,.25),transparent 65%);opacity:0;transition:opacity .6s var(--pe)}
.pc-card:hover{translate:0 -8px;background:rgba(255,255,255,.1);border-color:rgba(226,180,104,.55);box-shadow:0 30px 50px -28px rgba(0,0,0,.7)}
.pc-card:hover::before{opacity:1}
.pc-num{position:absolute;top:20px;right:22px;font-size:12px;font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.35)}
.pc-ico{position:relative;display:grid;place-items:center;width:52px;height:52px;margin-bottom:18px;border-radius:16px;background:rgba(226,180,104,.15);color:var(--pam);transition:background .5s var(--pe),color .5s var(--pe),transform .6s var(--pe)}
.pc-ico svg{width:24px;height:24px}
.pc-card:hover .pc-ico{background:var(--pam);color:var(--pdk);transform:rotate(-8deg) scale(1.08)}
.pc-card h3{position:relative;margin:0 0 8px;font-size:20px;line-height:1.25;color:#fff}
.pc-card p{position:relative;margin:0;color:rgba(255,255,255,.72);font-size:15px;line-height:1.65}

/* ---------------- Process timeline ---------------- */
.pa-flow{padding:clamp(56px,7.5vw,108px) 0;background:#e5e9d2}
.fs-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding-top:46px}
.fs-steps::before{content:"";position:absolute;top:14px;left:12.5%;right:12.5%;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--po),var(--pam))}
.fs-step{position:relative;padding:24px 22px 22px;border-radius:22px;background:#f7f0e3;border:1px solid rgba(10,31,23,.08);translate:0 0;transition:translate .5s var(--pe),box-shadow .5s var(--pe),border-color .5s var(--pe)}
.fs-step:hover{translate:0 -8px;border-color:rgba(139,157,59,.6);box-shadow:0 26px 44px -26px rgba(10,31,23,.4)}
.fs-dot{position:absolute;top:-43px;left:50%;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--po);border:5px solid #e5e9d2;box-shadow:0 0 0 2px var(--po);transition:background .4s var(--pe),box-shadow .4s var(--pe),transform .4s var(--pe)}
.fs-step:hover .fs-dot{background:var(--pam);box-shadow:0 0 0 2px var(--pam);transform:scale(1.2)}
.fs-step:last-child .fs-dot{animation:paPulse 2.6s ease-in-out infinite}
@keyframes paPulse{0%,100%{box-shadow:0 0 0 2px var(--po),0 0 0 0 rgba(139,157,59,.4)}50%{box-shadow:0 0 0 2px var(--po),0 0 0 12px rgba(139,157,59,0)}}
.fs-step b{display:block;font-size:12px;letter-spacing:.14em;color:var(--pod)}
.fs-step h3{margin:8px 0 8px;font-size:21px;line-height:1.2;letter-spacing:-.02em;color:var(--pdk)}
.fs-step p{margin:0;color:var(--pmu);font-size:15px;line-height:1.7}

/* ---------------- Marquee band ---------------- */
.pa-marquee{overflow:hidden;white-space:nowrap;padding:16px 0;background:var(--pod);color:#fff}
.pm-track{display:flex;width:max-content;animation:paMarq 44s linear infinite}
.pm-track span{flex:none;font-size:clamp(18px,2.4vw,30px);font-weight:800;letter-spacing:-.02em}
.pa-marquee:hover .pm-track{animation-play-state:paused}
@keyframes paMarq{to{transform:translateX(-50%)}}

/* ---------------- Gallery (masonry, nothing is cropped) ---------------- */
.pa-gallery{padding:clamp(56px,7vw,100px) 0;background:#f7f0e3;overflow:hidden}
.gx-grid{columns:4 240px;column-gap:14px}
.gx{position:relative;display:block;break-inside:avoid;margin:0 0 14px;border-radius:20px;overflow:hidden;background:#d8d2c5;min-height:150px;translate:0 0;transition:translate .5s var(--pe),box-shadow .5s var(--pe)}
.gx:hover{translate:0 -6px;box-shadow:0 26px 44px -22px rgba(10,31,23,.5)}
.gx-btn{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden;border-radius:inherit;font:inherit}
.gx img{display:block;width:100%;height:auto;transition:scale 1s var(--pe),filter .6s var(--pe)}
.gx:hover img{scale:1.06;filter:saturate(1.12)}
.gx-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,31,23,.6),transparent 55%);opacity:0;transition:opacity .5s var(--pe)}
.gx:hover .gx-btn::after{opacity:1}
/* warm light sweep across the photo on hover */
.gx-btn::before{content:"";position:absolute;z-index:3;top:-10%;bottom:-10%;left:-50%;width:35%;background:linear-gradient(100deg,transparent,rgba(255,236,190,.6),transparent);transform:skewX(-18deg) translateX(-150%);opacity:0;pointer-events:none}
.gx:hover .gx-btn::before{opacity:1;transform:skewX(-18deg) translateX(520%);transition:transform 1.1s var(--pe),opacity .3s}
.gx-n{position:absolute;z-index:2;top:14px;left:14px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(10,31,23,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:11px;font-weight:700;transition:background .4s var(--pe),transform .5s var(--pe)}
.gx:hover .gx-n{background:var(--pam);color:var(--pdk);transform:scale(1.12) rotate(-8deg)}
.gx-zoom{position:absolute;z-index:2;right:14px;bottom:14px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--pdk);font-size:22px;font-weight:600;line-height:1;opacity:0;translate:0 10px;transition:opacity .45s var(--pe),translate .45s var(--pe)}
.gx:hover .gx-zoom,.gx-btn:focus-visible .gx-zoom{opacity:1;translate:0 0}
.gx-btn:focus-visible{outline:3px solid var(--po);outline-offset:-3px}

/* ---------------- FAQ ---------------- */
.pa-faq{padding:clamp(56px,7vw,100px) 0;background:#e5e9d2}
.fq-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,90px);align-items:start}
.fq-intro p:not(.service-kicker){margin:16px 0 24px;max-width:420px;color:var(--pmu);font-size:17px;line-height:1.7}
.fq-list{display:grid;gap:10px}
.fq-item{border-radius:20px;background:#f7f0e3;border:1px solid rgba(10,31,23,.08);transition:border-color .5s var(--pe),box-shadow .5s var(--pe)}
.fq-item:hover,.fq-item.open{border-color:rgba(139,157,59,.6)}
.fq-item.open{box-shadow:0 22px 40px -26px rgba(10,31,23,.4)}
.fq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:20px 22px;border:0;background:none;color:var(--pdk);font:inherit;font-size:17px;font-weight:700;line-height:1.35;text-align:left;cursor:pointer}
.fq-q:focus-visible{outline:3px solid var(--po);outline-offset:-3px;border-radius:20px}
.fq-q i{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:rgba(139,157,59,.18);transition:background .4s var(--pe),transform .5s var(--pe)}
.fq-q i::before,.fq-q i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--pod);border-radius:2px;transition:transform .5s var(--pe),background .4s}
.fq-q i::after{transform:rotate(90deg)}
.fq-item.open .fq-q i{background:var(--po);transform:rotate(180deg)}
.fq-item.open .fq-q i::before,.fq-item.open .fq-q i::after{background:#fff}
.fq-item.open .fq-q i::after{transform:rotate(0)}
.fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--pe)}
.fq-item.open .fq-a{grid-template-rows:1fr}
.fq-a>div{overflow:hidden}
.fq-a p{margin:0;padding:0 22px 22px;color:var(--pmu);font-size:16px;line-height:1.75;max-width:640px}

/* ---------------- Pairs well with ---------------- */
.pa-pair{padding:clamp(48px,6vw,84px) 0;background:#f7f0e3}
.pp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pp-card{position:relative;display:block;padding:24px 24px 26px;border-radius:22px;background:#e5e9d2;border:1px solid rgba(10,31,23,.08);color:var(--pdk);text-decoration:none;overflow:hidden;translate:0 0;transition:translate .5s var(--pe),box-shadow .5s var(--pe),background .5s var(--pe),color .5s var(--pe),border-color .5s var(--pe)}
.pp-card:hover{translate:0 -8px;background:var(--pdk);color:#fff;border-color:var(--pdk);box-shadow:0 28px 48px -26px rgba(10,31,23,.6)}
.pp-card span{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--pod);transition:color .5s}
.pp-card:hover span{color:var(--pam)}
.pp-card h3{margin:14px 0 8px;padding-right:46px;font-size:22px;line-height:1.2;letter-spacing:-.03em}
.pp-card p{margin:0;color:var(--pmu);font-size:15px;line-height:1.6;transition:color .5s}
.pp-card:hover p{color:rgba(255,255,255,.72)}
.pp-card i{position:absolute;top:20px;right:20px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--po);color:#fff;font-style:normal;font-size:16px;transition:transform .5s var(--pe),background .5s}
.pp-card:hover i{background:var(--pam);color:var(--pdk);transform:rotate(45deg) scale(1.1)}
.pp-card:focus-visible{outline:3px solid var(--po);outline-offset:3px}

/* ---------------- Photo viewer ---------------- */
.pa-lb{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;background:rgba(4,18,12,.93);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s var(--pe)}
.pa-lb[hidden]{display:none}
.pa-lb.open{opacity:1}
.pa-lb-fig{margin:0;max-width:min(1100px,100%);max-height:100%;display:grid;gap:12px;justify-items:center}
.pa-lb-media img{display:block;max-width:100%;max-height:78vh;border-radius:18px;object-fit:contain;animation:paLbIn .5s var(--pe)}
@keyframes paLbIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.pa-lb-cap{color:#e8efe0;font-size:14px;text-align:center}
.pa-lb-cap b{color:var(--pam);margin-right:8px}
.pa-lb-btn{position:absolute;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:22px;cursor:pointer;transition:background .3s var(--pe),scale .3s var(--pe)}
.pa-lb-btn:hover{background:var(--pam);color:var(--pdk);scale:1.08}
.pa-lb-btn:focus-visible{outline:3px solid var(--pam);outline-offset:2px}
.pa-lb-close{top:20px;right:20px}
.pa-lb-prev{left:20px;top:50%;margin-top:-22px}
.pa-lb-next{right:20px;top:50%;margin-top:-22px}

/* ---------------- Entrance animations (only after the page JS has loaded) ---------------- */
@media (prefers-reduced-motion:no-preference){
  .pa-ready .pr{opacity:0;transform:translateY(34px);transition:opacity .85s var(--pe) calc(var(--i,0)*90ms),transform .95s var(--pe) calc(var(--i,0)*90ms),translate .5s var(--pe),background .5s var(--pe),color .5s var(--pe),border-color .5s var(--pe),box-shadow .5s var(--pe)}
  .pa-ready .pr.in{opacity:1;transform:none}
  /* gallery photos: curtain wipe, image settles from zoomed-in */
  .pa-ready .gx.pr{opacity:1;transform:none;clip-path:inset(0 0 100% 0 round 20px);transition:clip-path 1.1s var(--pe) calc(var(--i,0)*110ms),translate .5s var(--pe),box-shadow .5s var(--pe)}
  .pa-ready .gx.pr.in{clip-path:inset(0 0 0 0 round 20px)}
  .pa-ready .gx img{transform:scale(1.22);transition:transform 1.5s var(--pe) calc(var(--i,0)*110ms + .1s),scale 1s var(--pe),filter .6s var(--pe)}
  .pa-ready .gx.in img{transform:scale(1)}
  /* timeline line draws itself, left to right (top to bottom on phones) */
  .pa-ready .fs-steps::before{transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--pe) .2s}
  .pa-ready .fs-steps.in::before{transform:scaleX(1)}
}

/* Gallery photos must remain visible even if an entrance observer fails. */
.pa-ready .pa-gallery .gx.pr,
.pa-ready .pa-gallery .gx.pr.in {
  clip-path:none!important;
  opacity:1!important;
  transform:none!important;
}
.pa-ready .pa-gallery .gx img,
.pa-ready .pa-gallery .gx.in img { transform:none!important; }

/* ---------------- Responsive ---------------- */
@media(max-width:1000px){
  .gx-grid{columns:3 220px}
  .pc-grid,.pa-types-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pa-types-grid .pa-type:last-child{grid-column:1/-1}
}
@media(max-width:900px){
  .pa-head,.fq-grid{grid-template-columns:1fr;align-items:start}
  .pa-head>p{justify-self:start}
  .pp-grid{grid-template-columns:1fr}
}
@media(max-width:800px){
  .fs-steps{grid-template-columns:1fr;padding:0 0 0 38px}
  .fs-steps::before{top:10px;bottom:10px;left:11px;right:auto;width:3px;height:auto}
  .fs-dot{top:24px;left:-38px;margin-left:0}
  .pa-ready .fs-steps::before{transform-origin:top}
}
@media(max-width:620px){
  .pc-grid,.pa-types-grid{grid-template-columns:1fr}
  .gx-grid{columns:2 150px;column-gap:10px}
  .gx{margin-bottom:10px;border-radius:16px}
  .gx-n{width:30px;height:30px;top:10px;left:10px;font-size:10px}
  .fq-q{font-size:16px;padding:18px}
  .fq-a p{padding:0 18px 18px;font-size:15px}
  .pa-lb{padding:12px}
  .pa-lb-prev,.pa-lb-next{top:auto;bottom:18px;margin:0}
  .pa-lb-prev{left:calc(50% - 54px)}
  .pa-lb-next{right:calc(50% - 54px)}
  .pa-lb-media img{max-height:68vh}
}
@media(max-width:800px) and (prefers-reduced-motion:no-preference){
  .pa-ready .fs-steps::before{transform:scaleY(0)}
  .pa-ready .fs-steps.in::before{transform:scaleY(1)}
}

/* ---------------- Reduced motion: no movement at all ---------------- */
@media (prefers-reduced-motion:reduce){
  body.service-pergola-page *,body.service-pergola-page *::before,body.service-pergola-page *::after{animation:none!important;transition:none!important}
  .pa-fx{display:none}
}