/* ============================================================
   Contrive Consultants - Homepage (interactive hero + full-width)
   Scoped under .ccpl-home to keep it isolated from base styles.
   ============================================================ */
.ccpl-home{--navy:#0A2540;--navy2:#0d2f52;--teal:#1C7CA0;--teal-d:#155f7d;--ink:#0e1a2b;
  --mist:#f4f7f9;--muted:#5a6b7e;--line:#e7edf2;--pad:clamp(24px,5vw,104px);
  font-family:'Inter',system-ui,sans-serif;color:var(--ink);overflow-x:hidden}
.ccpl-home h1,.ccpl-home h2,.ccpl-home h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em;line-height:1.05;font-weight:600;margin:0}
.ccpl-home p{margin:0}
.ccpl-home img{display:block;max-width:100%}
.ccpl-home a{text-decoration:none;color:inherit}
.ccpl-home .eyebrow{font-family:'Space Grotesk';font-weight:600;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal)}
.ccpl-home .btn{display:inline-flex;align-items:center;gap:.55em;font-family:'Space Grotesk';font-weight:500;font-size:.95rem;
  padding:15px 30px;border-radius:2px;border:1.5px solid transparent;transition:.25s;cursor:pointer}
.ccpl-home .btn--teal{background:var(--teal);color:#fff}.ccpl-home .btn--teal:hover{background:var(--teal-d)}
.ccpl-home .btn--dark{background:var(--navy);color:#fff}.ccpl-home .btn--dark:hover{background:var(--navy2)}
.ccpl-home .btn .a{transition:transform .3s}.ccpl-home .btn:hover .a{transform:translateX(4px)}

/* reveal on scroll - only hidden when JS is active (html.ccpl-js), so content
   is always visible if scripts fail to load. */
html.ccpl-js .ccpl-home .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
html.ccpl-js .ccpl-home .rv.in{opacity:1 !important;transform:none !important}

/* ---------------- INTERACTIVE HERO ---------------- */
.ccpl-home .stage{--bg:#fff;--text:#0A2540;--muted2:#64748b;--accent:#1C7CA0;position:relative;height:100vh;min-height:660px;width:100%;
  background:var(--bg);transition:background .7s cubic-bezier(.5,0,.2,1);overflow:hidden;color:var(--text)}
.ccpl-home .imgwrap{position:absolute;top:0;right:0;width:50%;height:100%;background:var(--bg);overflow:hidden}
.ccpl-home .imgwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .85s ease}
.ccpl-home .imgwrap img.on{opacity:1;animation:ccpl-kb 7.5s ease-out forwards}
@keyframes ccpl-kb{from{transform:scale(1.08)}to{transform:scale(1.17)}}
.ccpl-home .feather{position:absolute;top:0;left:0;width:200px;height:100%;z-index:2;background:linear-gradient(90deg,var(--bg),rgba(0,0,0,0));transition:background .7s cubic-bezier(.5,0,.2,1);pointer-events:none}
.ccpl-home .seam{position:absolute;top:0;left:0;width:2px;height:100%;z-index:3;background:var(--accent);opacity:.5;transition:background .7s}
.ccpl-home .hdr{position:absolute;top:0;left:0;width:100%;height:94px;z-index:8;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);background:var(--bg);transition:background .7s cubic-bezier(.5,0,.2,1)}
.ccpl-home .hbrand{display:flex;align-items:center;gap:13px}
.ccpl-home .hbrand .chip{width:47px;height:47px;border-radius:50%;background:#fff;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.15);flex-shrink:0}
.ccpl-home .hbrand .chip img{width:100%;height:100%;object-fit:cover}
.ccpl-home .hbrand .wm{font-family:'Space Grotesk';font-weight:600;font-size:.95rem;line-height:1.08;color:var(--text)}
.ccpl-home .hbrand .wm span{display:block;font-weight:400;font-size:.61rem;letter-spacing:.3em;opacity:.7}
.ccpl-home .hdr .rt{display:flex;align-items:center;gap:24px;color:var(--text);font-family:'Space Grotesk';font-weight:500;font-size:.9rem}
.ccpl-home .hdr .menu{display:flex;align-items:center;gap:10px;cursor:pointer}
.ccpl-home .hdr .menu i{width:26px;height:2px;background:var(--text);display:block;position:relative}
.ccpl-home .hdr .menu i::after{content:"";position:absolute;top:6px;left:0;width:26px;height:2px;background:var(--text)}
.ccpl-home .list{position:absolute;left:var(--pad);top:calc(50% + 12px);transform:translateY(-50%);z-index:6;list-style:none;margin:0;padding:0}
.ccpl-home .list li{display:flex;align-items:baseline;gap:16px;cursor:pointer;padding:3px 0;opacity:0;transform:translateY(12px);
  animation:ccpl-rise .6s cubic-bezier(.4,0,.2,1) forwards;transition:transform .4s cubic-bezier(.5,0,.2,1),opacity .3s}
@keyframes ccpl-rise{to{opacity:.5;transform:translateY(0)}}
.ccpl-home .list li .num{font-family:'Space Grotesk';font-weight:500;font-size:.74rem;color:var(--muted2);width:24px;transition:color .3s}
.ccpl-home .list li .nm{font-family:'Space Grotesk';font-weight:500;font-size:clamp(1.45rem,2.9vw,2.6rem);line-height:1.44;color:var(--text);position:relative}
.ccpl-home .list li .nm::after{content:"";position:absolute;left:0;bottom:5px;width:0;height:2px;background:var(--text);transition:width .45s cubic-bezier(.5,0,.2,1)}
.ccpl-home .list li:hover,.ccpl-home .list li.active{opacity:1;transform:translateX(16px)}
.ccpl-home .list li.active .nm::after,.ccpl-home .list li:hover .nm::after{width:100%}
.ccpl-home .list li.active .num,.ccpl-home .list li:hover .num{color:var(--accent)}
.ccpl-home .desc{position:absolute;left:min(39%,calc(50% - 300px));z-index:6;width:262px;opacity:0;transform:translateY(-50%) translateX(-14px);
  transition:opacity .45s,transform .45s cubic-bezier(.5,0,.2,1);pointer-events:none;color:var(--text);
  background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(7px);padding:20px 22px;border-left:2px solid var(--accent)}
.ccpl-home .desc.show{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto}
.ccpl-home .desc .bignum{font-family:'Space Grotesk';font-weight:700;font-size:1rem;color:var(--accent);margin-bottom:12px}
.ccpl-home .desc .ln{width:44px;height:2px;background:currentColor;opacity:.45;margin-bottom:16px}
.ccpl-home .desc p{font-size:.96rem;line-height:1.5}
.ccpl-home .desc .by{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:14px 0 18px;opacity:.62}
.ccpl-home .desc a{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk';font-size:.84rem;font-weight:500;color:var(--text);border:1.5px solid currentColor;padding:9px 18px;border-radius:2px;transition:.3s}
.ccpl-home .desc a:hover{background:var(--text);color:var(--bg)}
.ccpl-home .counter{position:absolute;left:var(--pad);bottom:36px;z-index:6;font-family:'Space Grotesk';font-weight:500;font-size:1rem;letter-spacing:.12em;color:var(--text)}
.ccpl-home .counter b{color:var(--accent);font-weight:700}.ccpl-home .counter em{font-style:normal;opacity:.45}
.ccpl-home .scrollcue{position:absolute;right:var(--pad);bottom:36px;z-index:6;font-family:'Space Grotesk';font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted2);display:flex;align-items:center;gap:10px}
.ccpl-home .scrollcue .a{animation:ccpl-bob 1.6s ease-in-out infinite}
@keyframes ccpl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.ccpl-home .prog{position:absolute;left:0;bottom:0;width:100%;height:3px;z-index:7;background:rgba(0,0,0,.06)}
.ccpl-home .prog i{display:block;height:100%;width:0;background:var(--accent);transition:background .7s}
.ccpl-home .prog i.run{animation:ccpl-fill var(--cyc,3200ms) linear forwards}
@keyframes ccpl-fill{from{width:0}to{width:100%}}

/* ---------------- SECTIONS ---------------- */
.ccpl-home .sec{padding:clamp(72px,10vw,150px) var(--pad)}
.ccpl-home .wrap{max-width:1500px;margin:0 auto}
.ccpl-home .intro{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,6vw,80px);align-items:start;max-width:1500px;margin:0 auto}
.ccpl-home .intro h2{font-size:clamp(2rem,3.8vw,3.4rem);color:var(--navy)}
.ccpl-home .intro h2 em{font-style:normal;color:var(--teal)}
.ccpl-home .intro p{font-size:1.14rem;color:var(--muted);margin-bottom:20px;line-height:1.7}
@media(max-width:840px){.ccpl-home .intro{grid-template-columns:1fr;gap:24px}}

.ccpl-home .band{background:var(--navy);color:#fff;padding:clamp(66px,8vw,124px) var(--pad);text-align:center}
.ccpl-home .band .eyebrow{color:#8ec5dc}
.ccpl-home .band h2{font-size:clamp(1.85rem,3.4vw,2.9rem);color:#fff;max-width:1050px;margin:16px auto 0;line-height:1.18}
.ccpl-home .band__s{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:1050px;margin:58px auto 0}
.ccpl-home .band__s b{font-family:'Space Grotesk';font-weight:700;font-size:clamp(2.3rem,3.8vw,3.4rem);color:var(--teal);display:block;line-height:1}
.ccpl-home .band__s span{color:#9fb8cf;font-size:.9rem;margin-top:10px;display:block}
@media(max-width:700px){.ccpl-home .band__s{grid-template-columns:1fr 1fr;gap:36px 20px}}

.ccpl-home .proj__h{padding:clamp(66px,7vw,110px) var(--pad) 40px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:18px;max-width:1600px;margin:0 auto}
.ccpl-home .proj__h h2{font-size:clamp(2rem,3.6vw,3rem);color:var(--navy)}
.ccpl-home .mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.ccpl-home .tile{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--navy)}
.ccpl-home .tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.3,.1,.2,1)}
.ccpl-home .tile:hover img{transform:scale(1.07)}
.ccpl-home .tile__o{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,37,64,.9),rgba(10,37,64,.05) 58%);display:flex;flex-direction:column;justify-content:flex-end;padding:30px;transition:background .3s}
.ccpl-home .tile:hover .tile__o{background:linear-gradient(to top,rgba(21,95,125,.92),rgba(10,37,64,.15) 60%)}
.ccpl-home .tile__o small{font-family:'Space Grotesk';font-weight:500;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:#8ec5dc}
.ccpl-home .tile__o h3{color:#fff;font-size:1.22rem;margin-top:6px}
@media(max-width:900px){.ccpl-home .mosaic{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ccpl-home .mosaic{grid-template-columns:1fr}}

.ccpl-home .group{background:var(--mist)}
.ccpl-home .group__h{text-align:center;max-width:760px;margin:0 auto 52px}
.ccpl-home .group__h h2{font-size:clamp(1.9rem,3.4vw,2.9rem);color:var(--navy)}
.ccpl-home .group__h p{color:var(--muted);font-size:1.12rem;margin-top:14px;line-height:1.6}
.ccpl-home .gg{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1500px;margin:0 auto}
.ccpl-home .gc{background:#fff;border:1px solid var(--line);padding:34px 30px;position:relative;transition:transform .3s,box-shadow .3s;overflow:hidden}
.ccpl-home .gc::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.ccpl-home .gc:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(10,37,64,.12)}
.ccpl-home .gc:hover::before{transform:scaleX(1)}
.ccpl-home .gc b{font-family:'Space Grotesk';font-weight:700;font-size:1.45rem;color:var(--navy)}
.ccpl-home .gc b em{font-style:normal;color:var(--teal)}
.ccpl-home .gc .disc{font-size:.8rem;color:var(--teal);font-weight:600;margin:7px 0 14px;font-family:'Space Grotesk';letter-spacing:.02em}
.ccpl-home .gc p{color:var(--muted);font-size:.93rem;line-height:1.6;margin-bottom:16px}
.ccpl-home .gc a{font-family:'Space Grotesk';font-weight:500;font-size:.85rem;color:var(--navy);border-bottom:1.5px solid var(--teal);padding-bottom:2px}
@media(max-width:900px){.ccpl-home .gg{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ccpl-home .gg{grid-template-columns:1fr}}

/* testimonials */
.ccpl-home .tst .tst__h{text-align:center;max-width:720px;margin:0 auto 48px}
.ccpl-home .tst h2{font-size:clamp(1.9rem,3.4vw,2.9rem);color:var(--navy)}
.ccpl-home .tst__g{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1500px;margin:0 auto}
.ccpl-home .tst__c{background:#fff;border:1px solid var(--line);padding:36px 30px 30px;position:relative;margin:0;transition:transform .3s,box-shadow .3s}
.ccpl-home .tst__c:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(10,37,64,.10)}
.ccpl-home .tst__mark{font-family:'Space Grotesk';font-weight:700;font-size:4.4rem;line-height:.6;color:var(--teal);opacity:.28;margin-bottom:14px}
.ccpl-home .tst__c blockquote{margin:0 0 22px;font-size:1.04rem;line-height:1.65;color:var(--ink)}
.ccpl-home .tst__c figcaption b{display:block;font-family:'Space Grotesk';font-weight:600;font-size:.95rem;color:var(--navy)}
.ccpl-home .tst__c figcaption span{font-size:.85rem;color:var(--muted)}
.ccpl-home .tst__c::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.ccpl-home .tst__c:hover::before{transform:scaleX(1)}
@media(max-width:900px){.ccpl-home .tst__g{grid-template-columns:1fr}}

.ccpl-home .cta{padding:clamp(84px,10vw,158px) var(--pad);text-align:center;color:#fff;background:linear-gradient(120deg,var(--teal-d),var(--teal))}
.ccpl-home .cta h2{font-size:clamp(2.1rem,4.4vw,3.6rem);color:#fff;max-width:920px;margin:12px auto 30px;line-height:1.1}
.ccpl-home .cta__r{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}
.ccpl-home .cta .btn--white{background:#fff;color:var(--teal-d)}.ccpl-home .cta .btn--white:hover{background:var(--navy);color:#fff}
.ccpl-home .cta a.ph{font-family:'Space Grotesk';font-weight:500;color:#fff;font-size:1.05rem}

@media(max-height:880px){
  .ccpl-home .list li .nm{font-size:clamp(1.2rem,2.1vh + .55rem,2.1rem)}
  .ccpl-home .list li{padding:2px 0}
}
@media(max-height:720px){
  .ccpl-home .list li .nm{font-size:clamp(1rem,1.9vh + .45rem,1.6rem);line-height:1.38}
  .ccpl-home .hdr{height:78px}
}
@media(max-width:1120px){
  .ccpl-home .desc{display:none}
}
@media(max-width:820px){
  .ccpl-home .imgwrap,.ccpl-home .feather{width:100%;height:34%;top:auto;bottom:0}
  .ccpl-home .seam,.ccpl-home .desc,.ccpl-home .scrollcue,.ccpl-home .counter{display:none}
  /* the sticky site header (with hamburger) is shown on phones instead */
  .ccpl-home .hdr{display:none}
  .ccpl-home .list{top:104px;transform:none;bottom:calc(34% + 14px);overflow:hidden}
  .ccpl-home .list li{padding:0}
  .ccpl-home .list li .nm{font-size:clamp(.98rem,2.15vh,1.45rem);line-height:1.5}
  .ccpl-home .list li .num{font-size:.66rem;width:20px}
  .ccpl-home .list li:hover,.ccpl-home .list li.active{transform:translateX(8px)}
}