/* Sections that exist only on the landing pages and web design page. Built on
   the DUNK site's own tokens and type, so they sit with the copied sections. */

/* device frames */
.lp-b{background:#fff;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px rgba(0,0,0,.35);}
.band--paper .lp-b,.lp-light .lp-b{border-color:rgba(0,0,0,.08);box-shadow:0 24px 50px rgba(20,20,30,.16);}
.lp-chrome{height:34px;background:#F1F0EC;border-bottom:1px solid #E2E0D8;display:flex;align-items:center;gap:7px;padding:0 12px;}
.lp-chrome i{width:10px;height:10px;border-radius:50%;background:#FF5F57;flex:none;}
.lp-chrome i:nth-child(2){background:#FEBC2E;}
.lp-chrome i:nth-child(3){background:#28C840;}
.lp-url{flex:0 1 auto;margin:0 auto;max-width:70%;height:22px;padding:0 12px;display:flex;align-items:center;background:#fff;border:1px solid #E2E0D8;border-radius:7px;font-family:var(--font-body);font-size:11px;color:#5E5C57;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lp-b > img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;}
.lp-scroll{height:420px;overflow-y:auto;scrollbar-width:none;}
.lp-scroll img{display:block;width:100%;height:auto;}
.lp-ph{position:relative;padding:6px;background:#0B0B0B;border-radius:32px;box-shadow:0 0 0 1px #3A3A3A,0 24px 48px rgba(0,0,0,.45);}
.lp-ph > img{display:block;width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:0 0 26px 26px;}
.lp-sb{position:relative;display:flex;align-items:center;justify-content:space-between;height:26px;padding:0 16px 0 20px;background:var(--sb,#000);color:var(--sbt,#fff);border-radius:26px 26px 0 0;font-family:var(--font-body);font-size:10px;font-weight:700;line-height:1;}
.lp-notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:30%;height:14px;background:#000;border-radius:999px;}
.lp-sb__i{display:flex;align-items:flex-end;gap:2px;height:9px;}
.lp-sb__i i{display:block;width:3px;background:currentColor;border-radius:1px;}
.lp-sb__i i:nth-child(1){height:4px;}.lp-sb__i i:nth-child(2){height:6px;}.lp-sb__i i:nth-child(3){height:9px;}
.lp-scroll--ph{height:262px;border-radius:0 0 26px 26px;background:#fff;scrollbar-width:none;}

/* hero: three phones in a right-hand column beside the copy. The hero body
   becomes a two-column grid on wide screens; the copy keeps the left column,
   the phones sit in the right one, and the proof row spans both, so nothing
   is pinned to fixed offsets that can collide with the menu or the line. */
.lp-collage{display:none;}
@media (min-width:1181px){
  .phero--nav .phero__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(40%,520px));column-gap:clamp(2rem,4vw,4rem);align-items:center;}
  .phero__body > *{grid-column:1;}
  .phero__body > .phero__proof{grid-column:1 / -1;}
  .phero__body > .lp-collage{display:block;grid-column:2;grid-row:1 / 6;align-self:center;position:relative;width:100%;aspect-ratio:1.12;max-height:460px;pointer-events:none;}
  .lp-collage .lp-ph{position:absolute;box-shadow:0 0 0 1px #3A3A3A,0 30px 60px rgba(0,0,0,.55);}
  .lp-collage__p2{left:50%;top:0;width:36%;transform:translateX(-50%);z-index:3;}
  .lp-collage__p1{left:6%;top:9%;width:30%;transform:rotate(-7deg);z-index:2;filter:brightness(.9);}
  .lp-collage__p3{right:6%;top:9%;width:30%;transform:rotate(7deg);z-index:2;filter:brightness(.9);}
}

/* intro: two image-and-text sections */
.lp-split{background:#fff;padding:clamp(3.5rem,7vw,7rem) var(--edge);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:center;}

.lp-split--flip .lp-split__media{order:2;}
.lp-split__copy h2{margin:0;font-family:var(--font-head);font-weight:700;font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.06;letter-spacing:-.02em;color:#121212;}
.lp-split__copy p{margin:1.25rem 0 0;font-size:1.08rem;line-height:1.7;color:#3D3B44;max-width:36rem;}
.lp-chips{list-style:none;margin:1.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;max-width:36rem;}
.lp-chips li{background:#EEE8FD;color:#4C1D95;border-radius:var(--radius-full);padding:.55rem 1rem;font-size:.88rem;font-weight:600;}
.lp-split__media{position:relative;height:clamp(460px,46vw,600px);display:flex;align-items:center;justify-content:center;}
.lp-split__disc{position:absolute;width:min(92%,520px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F1ECFE,#E3DAFB 70%);}
.lp-split--flip .lp-split__disc{background:radial-gradient(circle at 35% 30%,#F5F8DC,#E9EFC0 70%);}
.lp-split__phone{position:relative;z-index:1;width:clamp(220px,20vw,270px);}
.lp-float{position:absolute;z-index:2;background:#fff;border-radius:18px;padding:10px;box-shadow:0 2px 6px rgba(26,15,58,.08),0 24px 50px rgba(26,15,58,.18);}
.lp-float img{display:block;width:100%;border-radius:10px;}
.lp-float--ba{left:0;top:16%;width:clamp(230px,21vw,280px);padding:10px 10px 8px;}
.lp-ba{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:900/671;user-select:none;}
.lp-ba .lp-ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;}
.lp-ba__line{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12);pointer-events:none;}
.lp-ba__knob{position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25);}
.lp-ba__knob::before,.lp-ba__knob::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-5px;border:5px solid transparent;}
.lp-ba__knob::before{left:4px;border-right-color:#5B21D6;}
.lp-ba__knob::after{right:4px;border-left-color:#5B21D6;}
.lp-ba__tag{position:absolute;top:8px;padding:3px 8px;border-radius:999px;background:rgba(18,18,18,.72);color:#fff;font-size:.7rem;font-weight:600;pointer-events:none;}
.lp-ba__tag--l{left:8px;}
.lp-ba__tag--r{right:8px;}
.lp-ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;}
.lp-ba__cap{margin:8px 2px 2px;font-size:.78rem;font-weight:600;color:#3D3B44;}
.lp-float--stat{right:2%;bottom:12%;width:220px;padding:20px 22px;display:flex;flex-direction:column;gap:6px;background:#141218;box-shadow:0 2px 6px rgba(0,0,0,.2),0 24px 50px rgba(26,15,58,.35);}
.lp-float__num{font-family:var(--font-head);font-weight:700;font-size:2.6rem;line-height:1;color:var(--lime);letter-spacing:-.02em;}
.lp-float__txt{font-size:.88rem;line-height:1.4;color:rgba(255,255,255,.82);}
.lp-float--how{right:0;top:10%;width:clamp(260px,24vw,330px);}
.lp-float--suburb{left:0;bottom:8%;width:clamp(270px,25vw,340px);}
@media (max-width:900px){
  .lp-split{grid-template-columns:minmax(0,1fr);}
  .lp-split--flip .lp-split__media{order:0;}
  .lp-split__media{height:520px;}
  .lp-float--ba{width:190px;left:0;}
  .lp-float--stat{width:180px;right:0;bottom:6%;}
  .lp-float__num{font-size:2.1rem;}
  .lp-float--how{width:210px;}
  .lp-float--suburb{width:230px;left:0;}
}

/* a screenshot with rounded corners and a soft shadow */
.lp-shot{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 2px 6px rgba(26,15,58,.08),0 24px 50px rgba(26,15,58,.18);}

/* real Google Ads result */
.lp-results{background:var(--paper);padding:clamp(3.5rem,7vw,7rem) var(--edge);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,5vw,5rem);align-items:center;}
.lp-results__copy h2{margin:0;font-family:var(--font-head);font-weight:700;font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.06;letter-spacing:-.02em;color:#121212;}
.lp-results__copy p{margin:1.1rem 0 0;font-size:1.08rem;line-height:1.7;color:#3D3B44;max-width:34rem;}
.lp-results__media{position:relative;padding:0;}
.lp-results__desk{width:86%;}
.lp-results__desk img{display:block;width:100%;height:auto;}
.lp-results__phone{position:absolute;right:0;top:12%;width:24%;z-index:2;}
.lp-gads{position:relative;left:-4%;margin-top:-3rem;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(96%,640px);border-radius:14px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.12),0 26px 50px rgba(26,15,58,.25);font-family:Roboto,Arial,var(--font-body);}
.lp-gads__t{display:flex;flex-direction:column;gap:6px;padding:14px 16px 18px;color:#fff;}
.lp-gads__t span{font-size:.9rem;}
.lp-gads__t b{font-weight:400;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.1;padding-bottom:4px;border-bottom:1px dashed rgba(255,255,255,.75);align-self:flex-start;}
.lp-gads__t--blue{background:#1A73E8;}
.lp-gads__t--green{background:#188038;}
.lp-gads__t--yellow{background:#F9AB00;color:#202124;}
.lp-gads__t--yellow b{border-bottom-color:rgba(32,33,36,.6);}
.lp-gads__t--red{background:#D93025;}
@media (max-width:900px){.lp-results{grid-template-columns:minmax(0,1fr);}.lp-gads{left:0;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));}}

/* sites we have built: each site on a panel in its own colours */
.lp-work__lede,.lp-feats__lede{margin:-.5rem 0 2.5rem;color:#55535C;font-size:1.05rem;}
.lp-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem 1.75rem;}
.lp-case{display:flex;flex-direction:column;gap:.5rem;}
.lp-case--feat{grid-column:1 / -1;}
.lp-case__stage{position:relative;overflow:hidden;border-radius:var(--radius-main);background:var(--c1);aspect-ratio:16/10.5;display:flex;align-items:center;justify-content:center;padding:7% 9%;}
.lp-case--feat .lp-case__stage{aspect-ratio:21/9;padding:5% 18%;}
.lp-case__shape{position:absolute;pointer-events:none;}
.lp-case__shape--a{width:62%;aspect-ratio:1;right:-18%;top:-34%;border-radius:50%;background:var(--c2);opacity:.85;}
.lp-case__shape--b{width:46%;aspect-ratio:1;left:-12%;bottom:-30%;border-radius:28%;background:var(--c3);opacity:.55;transform:rotate(28deg);}
.lp-case__stage{justify-content:flex-start;padding:7% 8%;}
.lp-case__desk{position:relative;z-index:1;width:76%;aspect-ratio:16/10;overflow-y:auto;scrollbar-width:none;border-radius:10px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18),0 30px 60px rgba(0,0,0,.35);}
.lp-case__desk img{display:block;width:100%;height:auto;}
.lp-case__phone{position:absolute;z-index:2;right:7%;bottom:7%;width:22%;}
.lp-case__phscroll{aspect-ratio:390/810;overflow-y:auto;scrollbar-width:none;border-radius:0 0 22px 22px;background:#fff;}
.lp-case__phscroll img{display:block;width:100%;height:auto;}
.lp-case h3{margin:1rem 0 0;font-family:var(--font-head);font-weight:700;font-size:clamp(1.4rem,2vw,1.8rem);color:#121212;}
.lp-case p{margin:0;color:#55535C;font-size:1rem;line-height:1.6;max-width:40rem;}
@media (max-width:900px){.lp-cases{grid-template-columns:minmax(0,1fr);}.lp-case--feat .lp-case__stage{aspect-ratio:16/10.5;padding:7% 9%;}}

/* features */
.lp-feat .tile__shot img{aspect-ratio:4/3;object-fit:cover;}
.lp-num{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:50%;font-family:var(--font-head);font-weight:700;font-size:1.1rem;margin:0 0 .75rem;}
.lp-num--0{background:#5B21D6;color:#fff;}
.lp-num--1{background:var(--lime);color:#121212;}
.lp-num--2{background:#1A0F3A;color:#fff;}
.lp-num--3{background:#8B5CF6;color:#fff;}

/* every page includes: eight in a 4 x 2 grid */
.lp-why8 .why{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1024px){.lp-why8 .why{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.lp-why8 .why{grid-template-columns:minmax(0,1fr);}}

/* how a build works */
.lp-steps__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;}
.lp-steps__list li{background:#fff;border-radius:var(--radius-main);padding:1.75rem;display:flex;flex-direction:column;gap:.6rem;}
.lp-steps__n{width:2.75rem;height:2.75rem;border-radius:50%;background:var(--lime);color:#121212;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:1.25rem;}
.lp-steps__list h3{margin:.5rem 0 0;font-family:var(--font-head);font-size:1.35rem;}
.lp-steps__list p{margin:0;color:#55535C;line-height:1.6;}
@media (max-width:1024px){.lp-steps__list{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* running ads */
.lp-ads{padding:0 var(--edge) clamp(3.25rem,6.5vw,7rem);background:var(--paper);}
.lp-ads__panel{background:var(--lime);border-radius:var(--radius-main);padding:clamp(1.75rem,4vw,3.5rem);display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;justify-content:space-between;color:#121212;}
.lp-ads__panel > div{flex:1 1 30rem;min-width:0;}
.lp-ads h2{margin:0 0 .6rem;font-family:var(--font-head);font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.02em;}
.lp-ads p{margin:0;font-size:1.05rem;line-height:1.6;max-width:44rem;}

/* enquiry form, standing in for the Pipedrive embed */
.lp-form{background:#fff;color:#121212;border-radius:var(--radius-main);padding:clamp(1.5rem,3vw,2.25rem);display:grid;gap:.9rem;box-shadow:0 24px 50px rgba(20,20,30,.12);}
.lp-form label{display:flex;flex-direction:column;gap:.4rem;font-size:.85rem;font-weight:600;}
.lp-form input,.lp-form select,.lp-form textarea{font:inherit;font-weight:400;font-size:.95rem;padding:.8rem .9rem;border:1px solid #DAD8D2;border-radius:.75rem;background:#FAFAF8;}
.lp-form .btn{justify-self:start;margin-top:.4rem;border:0;cursor:pointer;}

@media (max-width:900px){
  .lp-stat__panel{grid-template-columns:minmax(0,1fr);}
  .lp-grid2{grid-template-columns:minmax(0,1fr);}
  .lp-scroll{height:340px;}
  .lp-stat__phone{width:104px;}
  .lp-site__phone{width:104px;}
  .lp-scroll--ph{height:212px;}
}
@media (max-width:600px){.lp-steps__list{grid-template-columns:minmax(0,1fr);}}

/* what kind of page: three lists with icons */
.lp-services{padding:clamp(3.5rem,7vw,7rem) var(--edge);}
.lp-services > h2{margin:0 0 clamp(2.5rem,4vw,3.5rem);text-align:center;font-family:var(--font-head);font-weight:700;font-size:clamp(2rem,3.4vw,3.1rem);letter-spacing:-.02em;color:#121212;}
.lp-svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem clamp(1.5rem,3vw,3rem);}
.lp-svc__col{display:flex;gap:1.1rem;align-items:flex-start;}
.lp-svc__ico{flex:none;width:64px;height:64px;}
.lp-svc h3{margin:.6rem 0 1.1rem;font-family:var(--font-head);font-weight:700;font-size:clamp(1.35rem,1.9vw,1.65rem);line-height:1.15;color:#121212;}
.lp-svc ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;}
.lp-svc li{position:relative;padding-left:1.4rem;font-size:1rem;line-height:1.45;color:#3D3B44;}
.lp-svc li::before{content:"";position:absolute;left:0;top:.45em;width:.6rem;height:.6rem;border-radius:50%;background:#C5D84A;}
.lp-services .majors__cta{margin-top:clamp(2.5rem,4vw,3.5rem);display:flex;justify-content:center;align-items:center;gap:1.25rem;flex-wrap:wrap;}
@media (max-width:1024px){.lp-svc{grid-template-columns:minmax(0,1fr);max-width:34rem;margin:0 auto;}}

/* sections follow the site's own rhythm: rounded, with the page colour
   showing in a small gap between them, alternating white and paper */
.lp-split,.lp-results,.lp-services{margin-top:var(--shell);border-radius:var(--radius-main);}
.lp-split{background:#fff;}
.lp-split--flip{background:var(--paper);}
.lp-results{background:#fff;}
.lp-services{background:var(--paper);}
.band.lp-work{background:#fff;}
.band.lp-feats{background:var(--paper);}
.band#pricing{background:#fff;}
.band.lp-steps{background:var(--paper);}
.lp-ads{background:transparent;margin-top:var(--shell);padding:0;}

/* no visible scrollbars on the scrollable screens; a hint appears on hover instead */
.lp-scroll::-webkit-scrollbar,.lp-case__desk::-webkit-scrollbar,.lp-case__phscroll::-webkit-scrollbar,.lp-scroll--ph::-webkit-scrollbar{display:none;}
.lp-case__desk,.lp-case__phscroll,.lp-scroll,.lp-scroll--ph{scrollbar-width:none;-ms-overflow-style:none;}
.lp-hint{position:absolute;z-index:4;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;background:rgba(18,18,18,.86);color:#fff;border-radius:999px;padding:.5rem .9rem;font-family:var(--font-body);font-size:.82rem;font-weight:600;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.25);}
.lp-hint--desk{left:46%;top:calc(7% + 1rem);transform:translate(-50%,6px);}
.lp-case__desk:hover ~ .lp-hint--desk{opacity:1;transform:translate(-50%,0);}
.lp-hint--ph{left:50%;bottom:14px;transform:translate(-50%,6px);font-size:.7rem;padding:.4rem .7rem;}
.lp-case__phone:hover .lp-hint--ph{opacity:1;transform:translate(-50%,0);}

/* hosting and care block inside each price card */
.lp-host{margin-top:1rem;padding:1.1rem 1.2rem;border-radius:1rem;background:#16121F;color:#fff;border:0;box-shadow:0 10px 24px rgba(26,15,58,.18);}
.pcard--feat .lp-host{background:#0C0912;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.lp-host__price b{color:var(--lime);}
.lp-host__price{margin:0 0 .6rem;font-size:.95rem;}
.lp-host__price b{font-family:var(--font-head);font-size:1.5rem;margin-right:.3rem;}
.lp-host ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;}
.lp-host li{position:relative;padding-left:1.1rem;font-size:.88rem;line-height:1.4;color:rgba(255,255,255,.86);}
.lp-host li::before{content:"";position:absolute;left:0;top:.45em;width:.45rem;height:.45rem;border-radius:50%;background:var(--lime);}

/* while a screen is hovered, the panel around it dims so the screen stands out */
.lp-case__stage::after{content:"";position:absolute;inset:0;z-index:0;background:rgba(10,8,20,.42);opacity:0;transition:opacity .25s ease;pointer-events:none;}
.lp-case__stage:has(.lp-case__desk:hover)::after,.lp-case__stage:has(.lp-case__phone:hover)::after{opacity:1;}