/* ==========================================================
   depth.css : the 3D layer for growthmindedconsulting.com
   Loaded on every page after site.css. Brand tokens only.
   Everything here degrades to the flat site when motion is
   reduced, on touch screens, or if depth.js does not run.
   ========================================================== */

/* ---------- Navigation: shorter menu with a "More" group ---------- */
.nav-more{position:relative;}
.nav-more > summary{list-style:none;cursor:pointer;font-size:15px;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:6px;white-space:nowrap;padding:6px 0;}
.nav-more > summary::-webkit-details-marker{display:none;}
.nav-more > summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s;}
.nav-more[open] > summary::after{transform:translateY(2px) rotate(225deg);}
.nav-more-menu{position:absolute;top:calc(100% + 14px);right:-20px;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 24px 50px rgba(31,58,107,.18);display:flex;flex-direction:column;z-index:120;transform-origin:top right;animation:moreIn .22s cubic-bezier(.2,.8,.2,1);}
.nav-more-menu a{padding:11px 14px;border-radius:9px;font-size:15px;font-weight:700;color:var(--blue);white-space:nowrap;}
.nav-more-menu a:hover{background:var(--mist);}
@keyframes moreIn{from{opacity:0;transform:perspective(600px) rotateX(-18deg) translateY(-6px);}to{opacity:1;transform:none;}}
@media (max-width:1180px){
  .nav-more{width:100%;}
  .nav-more > summary{padding:12px 30px;}
  .nav-more-menu{position:static;box-shadow:none;border:none;border-radius:0;padding:0 0 6px 16px;min-width:0;animation:none;}
  .nav-more-menu a{padding:10px 30px;}
}

/* ---------- Extruded 3D numerals (services + ISA rows) ---------- */
.svc .n,.isa-row .n{font-weight:700;letter-spacing:-.5px;}
.svc .n{font-size:40px;color:var(--green);text-shadow:1px 1px 0 var(--green-deep),2px 2px 0 var(--green-deep),3px 3px 0 #5a7f28,4px 4px 0 #5a7f28,8px 10px 16px rgba(31,58,107,.22);}
.isa-row .n{font-size:34px;color:var(--teal-bright);text-shadow:1px 1px 0 var(--teal),2px 2px 0 var(--teal),3px 3px 0 #1d5a62,4px 4px 0 #1d5a62,8px 10px 16px rgba(0,0,0,.35);}

/* ---------- Hover depth on service and ISA rows ---------- */
.svc,.isa-row{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,background .45s;border-radius:14px;}
@media (hover:hover){
  .svc:hover{transform:perspective(1200px) translateZ(18px) rotateX(2deg);background:#fff;box-shadow:0 22px 50px rgba(31,58,107,.12);}
  .isa-row:hover{transform:perspective(1200px) translateZ(14px) rotateX(2deg);background:rgba(255,255,255,.05);}
}
@media (min-width:821px){ .svc{padding-left:22px;padding-right:22px;margin:0 -22px;} .isa-row{padding-left:18px;padding-right:18px;margin:0 -18px;} }

/* ---------- Pointer-follow tilt (cards, testimonials, offers) ---------- */
.depth-tilt{
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .18s;
  transform-style:preserve-3d;will-change:transform;
}
.depth-tilt.is-tilting{transition:transform .08s linear,box-shadow .3s,border-color .18s;--ty:-6px;}
.card.depth-tilt:hover{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);box-shadow:0 26px 50px rgba(24,36,48,.16);}
.tcard.depth-tilt.is-tilting{box-shadow:0 30px 60px rgba(24,44,82,.34);}
section.shelf .tier.depth-tilt.is-tilting{box-shadow:0 22px 44px rgba(31,58,107,.14);}
.depth-tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.22),transparent 55%);opacity:0;transition:opacity .3s;}
.depth-tilt.is-tilting::after{opacity:1;}
.tcard,section.shelf .tier{position:relative;}

/* ---------- Scroll reveal (only when depth.js has run) ---------- */
html.depth-js [data-reveal]{opacity:0;transform:perspective(1200px) rotateX(16deg) translateY(46px);transform-origin:50% 0;transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--rd,0ms);}
html.depth-js [data-reveal].in{opacity:1;transform:none;}

/* ==========================================================
   HOME PAGE PIECES
   ========================================================== */

/* ---------- Hero: 3D system stack built from the emblem ---------- */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center;}
.hero-3d{display:none;}
@media (max-width:1179px){
  .hero-3d{display:flex;position:relative;left:50%;width:440px;height:520px;margin:0 0 -200px;transform:translateX(-50%) scale(.66);transform-origin:top center;align-items:center;justify-content:center;perspective:1500px;perspective-origin:50% 20%;}
}
@media (min-width:1180px){
  .hero .wrap.hero-grid{max-width:1240px;grid-template-columns:minmax(0,1fr) 440px;}
  .hero-3d{display:flex;position:relative;height:520px;align-items:center;justify-content:center;perspective:1500px;perspective-origin:50% 20%;}
}
.stack{position:relative;width:300px;height:300px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-42deg);animation:stackSway 16s ease-in-out infinite;}
.slab{position:absolute;border-radius:14px;transform-style:preserve-3d;box-sizing:border-box;padding:0 18px 16px;display:flex;flex-direction:column;justify-content:flex-end;}
.slab::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:22px;transform-origin:bottom;transform:rotateX(-90deg);background:inherit;filter:brightness(.7);border-radius:0 0 8px 8px;}
.slab::after{content:"";position:absolute;right:0;top:0;width:22px;height:100%;transform-origin:right;transform:rotateY(90deg);background:inherit;filter:brightness(.55);border-radius:0 8px 8px 0;}
.slab .t{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.08;letter-spacing:-.3px;max-width:200px;}
.slab.s0{width:330px;height:330px;left:-15px;top:-15px;background:var(--blue-mid);color:#fff;border:1px solid rgba(158,197,209,.35);transform:translateZ(0);box-shadow:40px 40px 90px rgba(0,0,0,.45);}
.slab.s1{width:260px;height:260px;left:55px;top:-15px;background:var(--green);color:#152400;transform:translateZ(80px);animation:slab1 8s ease-in-out infinite;}
.slab.s2{width:190px;height:190px;left:125px;top:-15px;background:var(--teal-bright);color:#0b2b26;transform:translateZ(160px);animation:slab2 8s ease-in-out infinite;}
.slab.s3{width:120px;height:120px;left:195px;top:-15px;background:#fff;color:var(--blue);transform:translateZ(240px);animation:slab3 8s ease-in-out infinite;padding:0 12px 12px;}
.slab.s3 .t{font-size:19px;}
@keyframes stackSway{0%,100%{transform:rotateX(58deg) rotateZ(-42deg);}50%{transform:rotateX(54deg) rotateZ(-30deg);}}
@keyframes slab1{0%,100%{transform:translateZ(80px);}50%{transform:translateZ(92px);}}
@keyframes slab2{0%,100%{transform:translateZ(160px);}50%{transform:translateZ(182px);}}
@keyframes slab3{0%,100%{transform:translateZ(240px);}50%{transform:translateZ(272px);}}
.hero-3d .tag{position:absolute;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.96);color:var(--blue);font-size:13.5px;font-weight:700;box-shadow:0 14px 30px rgba(0,0,0,.25);animation:tagFloat 7s ease-in-out infinite;white-space:nowrap;}
.hero-3d .tag i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:8px;vertical-align:1px;}
@keyframes tagFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}

/* ---------- Library: price ladder as 3D blocks ---------- */
.ladder{display:flex;align-items:flex-end;justify-content:center;gap:22px;margin:44px auto 0;padding:0 10px 30px;perspective:1600px;perspective-origin:50% -20%;flex-wrap:wrap;}
.blk{position:relative;width:140px;transform-style:preserve-3d;transform:rotateY(-22deg) rotateX(-4deg);transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.blk:hover{transform:rotateY(-6deg) rotateX(-2deg) translateY(-14px);}
.blk .f{position:absolute;inset:0;border-radius:8px;padding:16px 14px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;box-shadow:0 26px 40px -18px rgba(31,58,107,.45);}
.blk .sd{position:absolute;top:0;right:0;height:100%;width:var(--d);transform-origin:right;transform:rotateY(90deg);border-radius:0 8px 8px 0;}
.blk .tp{position:absolute;left:0;top:0;width:100%;height:var(--d);transform-origin:top;transform:rotateX(90deg);border-radius:8px 8px 0 0;}
.blk .p{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.05;}
.blk .l{font-size:13px;font-weight:700;line-height:1.3;}
.blk.b1{height:110px;--d:20px;} .blk.b1 .f{background:#fff;color:var(--blue);border:1px solid var(--line);} .blk.b1 .sd{background:#d9e2ec;} .blk.b1 .tp{background:#f3f7fb;}
.blk.b2{height:135px;--d:28px;} .blk.b2 .f{background:var(--mint);color:var(--blue-deep);} .blk.b2 .sd{background:#7ea9b6;} .blk.b2 .tp{background:#bcd8e1;}
.blk.b3{height:160px;--d:36px;} .blk.b3 .f{background:var(--teal-bright);color:#0b2b26;} .blk.b3 .sd{background:#2a9e8b;} .blk.b3 .tp{background:#7fe0cf;}
.blk.b4{height:185px;--d:44px;} .blk.b4 .f{background:var(--teal);color:#fff;} .blk.b4 .sd{background:#1c5c64;} .blk.b4 .tp{background:#3a98a4;}
.blk.b5{height:210px;--d:52px;} .blk.b5 .f{background:var(--green);color:#152400;} .blk.b5 .sd{background:var(--green-deep);} .blk.b5 .tp{background:#a9cf66;}
.blk.b6{height:235px;--d:60px;} .blk.b6 .f{background:var(--blue);color:#fff;} .blk.b6 .sd{background:var(--blue-deep);} .blk.b6 .tp{background:#2c4f8a;}
@media (min-width:1120px){ .store-inner .ladder,.store-inner .ladder-floor{position:relative;left:50%;width:1080px;margin-left:-540px;} }
.ladder-floor{height:18px;max-width:1080px;margin:-18px auto 0;border-radius:50%;background:radial-gradient(ellipse at center,rgba(31,58,107,.22),transparent 70%);}
@media (max-width:760px){
  .ladder{gap:14px;perspective:none;}
  .blk,.blk:hover{transform:none;width:calc(50% - 10px);height:auto !important;min-height:96px;}
  .blk .f{position:relative;min-height:96px;}
  .blk .sd,.blk .tp{display:none;}
  .ladder-floor{display:none;}
}

/* ---------- ISA: growth strands as rising 3D steps ---------- */
.strand-steps{display:flex;align-items:flex-end;gap:18px;margin:10px 0 46px;perspective:1400px;perspective-origin:30% -30%;flex-wrap:wrap;}
.step{position:relative;flex:1 1 200px;max-width:260px;transform-style:preserve-3d;transform:rotateX(-8deg) rotateY(-16deg);transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.step:hover{transform:rotateX(-4deg) rotateY(-6deg) translateY(-10px);}
.step .f{position:absolute;inset:0;border-radius:10px;padding:18px 18px;display:flex;flex-direction:column;justify-content:space-between;}
.step .sd{position:absolute;top:0;right:0;height:100%;width:34px;transform-origin:right;transform:rotateY(90deg);border-radius:0 10px 10px 0;}
.step .tp{position:absolute;left:0;top:0;width:100%;height:34px;transform-origin:top;transform:rotateX(90deg);border-radius:10px 10px 0 0;}
.step .k{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.85;}
.step b{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.05;letter-spacing:-.3px;}
.step.st1{height:120px;} .step.st1 .f{background:var(--teal);color:#fff;} .step.st1 .sd{background:#1c5c64;} .step.st1 .tp{background:#3a98a4;}
.step.st2{height:160px;} .step.st2 .f{background:var(--teal-bright);color:#0b2b26;} .step.st2 .sd{background:#2a9e8b;} .step.st2 .tp{background:#7fe0cf;}
.step.st3{height:200px;} .step.st3 .f{background:var(--green);color:#152400;} .step.st3 .sd{background:var(--green-deep);} .step.st3 .tp{background:#a9cf66;}
@media (max-width:760px){ .step,.step:hover{transform:none;flex-basis:100%;max-width:none;height:auto !important;} .step .f{position:relative;min-height:84px;} .step .sd,.step .tp{display:none;} }

/* ---------- ISA video in a tilted 3D frame ---------- */
.isa-video .frame3d{perspective:1600px;max-width:760px;}
.isa-video .frame3d .frame{transform:rotateY(-9deg) rotateX(4deg);transform-origin:40% 50%;transition:transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .8s;box-shadow:30px 40px 80px rgba(0,0,0,.45),0 0 0 1px rgba(62,203,179,.25);}
.isa-video .frame3d:hover .frame,.isa-video .frame3d:focus-within .frame{transform:none;box-shadow:0 30px 70px rgba(0,0,0,.4);}

/* ---------- Testimonials: 3D staggered depth ---------- */
@media (min-width:900px){
  .tgrid{perspective:1600px;}
  .tgrid .tcard:nth-child(3n+1){--ry:6deg;}
  .tgrid .tcard:nth-child(3n){--ry:-6deg;}
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .stack,.slab,.hero-3d .tag{animation:none !important;}
  html.depth-js [data-reveal]{opacity:1;transform:none;transition:none;}
  .depth-tilt,.svc,.isa-row,.blk,.step,.isa-video .frame3d .frame{transition:none;}
}

/* ---------- Phones: lighter reveal, no sideways scrolling ---------- */
@media (max-width:900px){
  html.depth-js [data-reveal]{transform:translateY(28px);}
}
@media (max-width:760px){
  .multisite a{white-space:normal;}
}
html,body{overflow-x:clip;}