/* ROCK SOLID — home page redesign (Nov 2026): stone hero, slab rail, scroll story, Crush! launch, one big number, mosaic */

/* ================= HERO: the stone fills the right side ================= */
.hero2{position:relative;min-height:min(100svh,940px);display:flex;align-items:center;background:var(--ink0);overflow:hidden;padding:104px 0 56px}
.h2-photo{position:absolute;top:0;right:0;bottom:0;width:55%;overflow:hidden;background:#0c0a07}
.h2-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:62% 50%;animation:h2push 20s ease-in-out infinite alternate}
.h2-photo::before{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,var(--ink0) 0,rgba(19,16,9,.55) 12%,rgba(19,16,9,0) 30%);pointer-events:none}
.h2-sweep{position:absolute;top:-10%;bottom:-10%;left:-40%;width:40%;z-index:1;pointer-events:none;background:linear-gradient(100deg,rgba(255,246,226,0) 0,rgba(255,246,226,.16) 50%,rgba(255,246,226,0) 100%);mix-blend-mode:screen;animation:h2sweep 11s ease-in-out infinite 1.5s}
@keyframes h2push{from{transform:scale(1) translateX(0)}to{transform:scale(1.06) translateX(-1.5%)}}
@keyframes h2sweep{0%{transform:translateX(0) skewX(-12deg)}55%,100%{transform:translateX(400%) skewX(-12deg)}}
.hero2 #dust{z-index:2}
.h2-inner{position:relative;z-index:3;width:min(1180px,92%)}
.h2-plate{max-width:830px;background:rgba(15,11,8,.72);border-left:6px solid var(--gold);border-radius:var(--r);padding:40px 46px 38px}
.hero2 h1{font-size:clamp(3.6rem,6.7vw,6.3rem);margin:.16em 0 .2em;color:var(--ivory);text-shadow:none}
.h2-gold{color:var(--goldhi)}
.hero2 .hero-sub{font-size:clamp(1.1rem,1.35vw,1.28rem);line-height:1.6;color:var(--ivory);max-width:34em;margin:0 0 26px}
.hero2 .hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 22px}
.hero2 .hero-badges{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:900px){
  .hero2{display:block;min-height:0;padding:64px 0 36px}
  .h2-photo{position:relative;width:100%;aspect-ratio:16/10;height:auto}
  .h2-photo::before{background:linear-gradient(0deg,var(--ink0) 0,rgba(19,16,9,0) 40%)}
  .h2-inner{margin-top:-56px}
  .h2-plate{padding:26px 22px 24px;border-left-width:5px}
  .hero2 h1{font-size:clamp(2.9rem,13vw,3.9rem)}
}

/* ================= SLAB RAIL ================= */
.railsec{padding:clamp(80px,10vw,128px) 0 64px;background:var(--ink0);overflow:hidden}
.rail-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:40px}
.rail-head .h-display{margin:.12em 0 0}
.rail-copy p{font-size:1.16rem;line-height:1.62;color:var(--ivory);margin:0 0 14px}
.rail-copy .fine{border-left:3px solid var(--gold);padding-left:16px;font-size:1.04rem;margin:0}
.rail{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none;cursor:grab;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail:focus-visible{box-shadow:inset 0 0 0 3px var(--goldhi)}
.rail.dragging{scroll-snap-type:none;cursor:grabbing}
.rail-track{display:flex;align-items:center;gap:28px;width:max-content;padding:16px 25vw 26px}
.rcard{position:relative;flex:0 0 auto;height:min(68vh,640px);margin:0;scroll-snap-align:center;border-radius:var(--r);overflow:hidden;background:var(--ink2);box-shadow:0 30px 70px rgba(0,0,0,.55);opacity:.4;transform:scale(.9);filter:saturate(.55) brightness(.8);transition:opacity .5s,transform .55s var(--ease),filter .5s;cursor:pointer}
.rcard.is-active{opacity:1;transform:none;filter:none;cursor:zoom-in}
.rcard.rend,.rcard.rend.is-active{cursor:default}
.rcard img{display:block;height:100%;width:auto;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.rplate{position:absolute;left:18px;bottom:18px;max-width:calc(100% - 36px);background:rgba(15,11,8,.88);border-left:5px solid var(--gold);border-radius:2px;padding:12px 20px 14px}
.rplate span{display:block;font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.05em;text-transform:uppercase;color:var(--goldhi)}
.rplate b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(26px,2.3vw,34px);letter-spacing:.02em;line-height:1.05;text-transform:uppercase;color:var(--ivory)}
.rend{width:min(520px,80vw);display:flex;align-items:center;padding:44px 40px;border:1px solid var(--line-strong)}
.rend-in .big{font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,4vw,3.6rem);line-height:.95;text-transform:uppercase;color:var(--ivory);margin-bottom:16px}
.rend-in .big b{color:var(--goldhi)}
.rend-in p{font-size:1.12rem;line-height:1.55;color:var(--ivory);margin:0 0 24px}
.rend-in .arcade-link{display:block;margin-top:20px}
.rail-ui{display:flex;align-items:center;gap:18px;margin-top:20px;flex-wrap:wrap}
.rail-btn{width:60px;height:60px;border-radius:50%;border:1px solid var(--line-strong);background:var(--ink2);color:var(--ivory);font-size:24px;line-height:1;cursor:pointer;transition:border-color .2s,color .2s}
.rail-btn:hover:not(:disabled){border-color:var(--goldhi);color:var(--goldhi)}
.rail-btn:disabled{opacity:.35;cursor:default}
.rail-count{font-family:var(--disp);font-weight:800;font-size:1.7rem;letter-spacing:.04em;color:var(--ivory)}
.rail-count b{color:var(--goldhi)}
.rail-hint{font-size:1.04rem;color:var(--ivory)}
.loupe{position:fixed;left:0;top:0;z-index:40;width:230px;height:230px;border-radius:50%;border:3px solid var(--goldhi);box-shadow:0 18px 44px rgba(0,0,0,.6),inset 0 0 0 2px rgba(0,0,0,.35);background-color:#0c0a07;background-repeat:no-repeat;pointer-events:none;opacity:0;transform:scale(.7);transition:opacity .16s,transform .16s}
.loupe.on{opacity:1;transform:scale(1)}
.rcard .tagbtn{top:16px;right:16px;left:auto}
@media(max-width:900px){
  .rail-head{grid-template-columns:1fr;gap:16px;margin-bottom:26px}
  .rail-track{gap:14px;padding:12px 8vw 20px}
  .rcard{height:auto;width:84vw}
  .rcard img{width:100%;height:auto}
  .rplate{left:10px;bottom:10px;padding:8px 14px 10px}
  .rplate span{font-size:16px}
  .rplate b{font-size:24px}
  .rend{width:84vw;padding:30px 24px}
  .rail-btn{width:54px;height:54px}
  .rail-hint{flex-basis:100%;font-size:1rem}
}

/* ================= ONE BIG NUMBER ================= */
.nums2{padding:clamp(70px,8vw,110px) 0 clamp(60px,7vw,96px);background:var(--ink1);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.nhero .val{font-family:var(--disp);font-weight:800;font-size:clamp(6rem,13vw,10rem);line-height:.86;color:var(--goldhi)}
.nhero .lbl{font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,2.1vw,2rem);letter-spacing:.04em;text-transform:uppercase;color:var(--ivory);margin-top:12px}
.nrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:920px;margin:48px auto 0;padding-top:38px;border-top:1px solid var(--line-strong)}
.nrow .num{padding:0 16px}
.nrow .num::before,.nrow .num::after{display:none}
.nrow .num+.num{border-left:1px solid var(--line)}
.nrow .num .val{font-size:3rem;line-height:1}
.nrow .num .lbl{margin-top:8px}
@media(max-width:600px){.nrow .num{padding:0 8px}.nrow .num .val{font-size:2.5rem}}

/* ================= HOW IT WORKS: sticky scroll story ================= */
.story{padding:clamp(80px,10vw,128px) 0 clamp(40px,6vw,80px)}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);margin-top:36px;align-items:start}
.story-media{position:sticky;top:96px;height:min(calc(100vh - 140px),700px);aspect-ratio:4/5;max-width:100%;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-strong);box-shadow:var(--shadow);background:var(--ink2)}
.sm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.sm.on{opacity:1}
.story-steps-wrap{position:relative;padding-left:44px}
.story-prog{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line);border-radius:2px;overflow:hidden}
.story-prog i{position:absolute;inset:0;background:var(--goldhi);transform-origin:top;transform:scaleY(0)}
.story-steps{list-style:none;margin:0;padding:0}
.sstep{min-height:74vh;display:flex;align-items:center;opacity:.32;transition:opacity .5s}
.sstep:first-child{min-height:62vh;align-items:flex-start;padding-top:6vh}
.sstep.on{opacity:1}
.sn{display:block;font-family:var(--disp);font-weight:800;font-size:160px;line-height:.8;color:transparent;-webkit-text-stroke:2px var(--goldhi);margin-bottom:18px}
.sstep h3{font-family:var(--disp);font-weight:800;font-size:40px;letter-spacing:.02em;line-height:1;text-transform:uppercase;color:var(--ivory);margin:0 0 14px}
.sstep p{font-size:1.2rem;line-height:1.6;color:var(--ivory);max-width:30em;margin:0}
.sstep-img{display:none}
@media(max-width:900px){
  .story-grid{grid-template-columns:1fr;margin-top:20px}
  .story-media,.story-prog{display:none}
  .story-steps-wrap{padding-left:0}
  .sstep,.sstep:first-child{display:block;min-height:0;padding:0;opacity:1;margin-bottom:48px}
  .sstep-img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line-strong);margin-bottom:20px}
  .sn{font-size:96px;margin-bottom:10px}
  .sstep h3{font-size:32px}
  .sstep p{font-size:1.1rem}
}

/* ================= CRUSH! launch ================= */
.crush2{position:relative;min-height:100svh;display:flex;align-items:center;background:var(--ink0);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.c2-photo{position:absolute;top:0;right:0;bottom:0;width:52%;overflow:hidden}
.c2-photo img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;will-change:transform}
.c2-photo::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--ink0) 0,rgba(19,16,9,.5) 14%,rgba(19,16,9,0) 34%);pointer-events:none}
.c2-inner{position:relative;z-index:3}
.c2-plate{position:relative;max-width:780px;background:rgba(15,11,8,.82);border-left:6px solid var(--gold);border-radius:var(--r);padding:46px 50px 44px}
.c2-bang{font-family:var(--disp);font-weight:800;font-size:clamp(6rem,15vw,13.75rem);line-height:.8;text-transform:uppercase;color:var(--ivory);margin:.08em 0 .14em}
.c2-bang b{color:var(--goldhi)}
.c2-plate p{font-size:1.22rem;line-height:1.6;color:var(--ivory);max-width:30em;margin:0 0 24px}
.c2-uses{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;padding:0}
.c2-uses li{background:var(--ink0);border:1px solid var(--line-strong);border-radius:999px;padding:10px 20px;font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.05em;text-transform:uppercase;color:var(--ivory)}
.c2-stamp{position:absolute;top:-34px;right:-30px;width:156px;height:156px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;padding:22px;background:var(--gold);color:var(--ink0);font-family:var(--disp);font-weight:800;font-size:23px;line-height:1;letter-spacing:.03em;text-transform:uppercase;border:3px dashed rgba(19,16,9,.5);box-shadow:0 0 0 4px var(--gold),0 16px 34px rgba(0,0,0,.5);transform:rotate(14deg);opacity:0}
.crush2.stamped .c2-stamp{animation:c2stamp .9s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes c2stamp{from{opacity:0;transform:rotate(-200deg) scale(.2)}to{opacity:1;transform:rotate(14deg) scale(1)}}
.crush2.crushable{cursor:pointer}
.crush2.crushing .c2-plate,.crush2.crushing .c2-photo{opacity:0}
@media(max-width:900px){
  .crush2{display:block;min-height:0;padding-bottom:40px}
  .c2-photo{position:relative;width:100%;height:58vh}
  .c2-photo::before{background:linear-gradient(0deg,var(--ink0) 0,rgba(19,16,9,0) 40%)}
  .c2-inner{margin-top:-72px}
  .c2-plate{padding:30px 22px 28px}
  .c2-bang{font-size:clamp(5rem,26vw,7.4rem)}
  .c2-stamp{width:112px;height:112px;font-size:17px;padding:14px;top:-40px;right:10px}
  .c2-uses li{font-size:18px;padding:8px 16px}
}

/* ================= INSTALLED: editorial mosaic ================= */
.gallery.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:14px}
.gallery.mosaic>*{min-width:0}
.gallery.mosaic>.gal.lead,.gallery.mosaic>.tagwrap:first-child{grid-column:1/4;grid-row:1/4}
.gallery.mosaic .gal{display:block;width:100%;aspect-ratio:4/3;height:auto}
.gallery.mosaic .gal.lead{aspect-ratio:auto;height:100%}
.gallery.mosaic>.tagwrap,.gallery.mosaic>.gal{transition:transform .55s var(--ease)}
.gallery.mosaic>.tagwrap:hover,.gallery.mosaic>.gal:hover{transform:translateY(-6px)}
.gallery.mosaic>.tagwrap:hover .gal{box-shadow:0 26px 50px rgba(42,35,24,.3)}
.gallery.mosaic .gal:hover img{transform:scale(1.04)}
.gallery.mosaic>.tagwrap:not(:first-child) .draft span,.gallery.mosaic>.gal:not(.lead) .draft span{font-size:15px}
@media(max-width:900px){
  .gallery.mosaic{grid-template-columns:1fr}
  .gallery.mosaic>.gal.lead,.gallery.mosaic>.tagwrap:first-child{grid-column:auto;grid-row:auto}
  .gallery.mosaic .gal.lead{aspect-ratio:4/3;height:auto}
}

@media(prefers-reduced-motion:reduce){
  .h2-photo img,.h2-sweep{animation:none}
  .h2-sweep{display:none}
  .rcard,.sm,.sstep,.loupe,.gallery.mosaic>*{transition:none}
  .crush2.stamped .c2-stamp{animation:none;opacity:1}
}
.rail-head .h-display{font-size:clamp(3rem,11vw,5.6rem)}
@media(max-width:900px){
  .railsec{padding-bottom:48px}
  .rail-head{margin-bottom:14px}
  .c2-stamp{top:-118px;right:12px}
}

/* ================= go-live pass (Nov 2026) ================= */
/* promise band: one clean photo in its own 4:3 frame, words on a dark plate, no gold rule */
.promise{padding:clamp(70px,9vw,120px) 0;background:var(--ink0);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.promise-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center}
.promise-photo{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-strong);box-shadow:var(--shadow)}
.promise-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3}
.promise-plate{position:relative;z-index:2;margin-left:-90px;background:rgba(15,11,8,.94);border-left:6px solid var(--gold);border-radius:var(--r);padding:44px 44px 38px;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.promise-plate blockquote{margin:0;font-family:var(--disp);font-weight:800;font-size:clamp(2.4rem,4vw,3.8rem);line-height:1;text-transform:uppercase;color:var(--ivory)}
.promise-plate blockquote b{color:var(--goldhi)}
.promise-plate cite{display:block;margin-top:20px;font-style:normal;font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.05em;text-transform:uppercase;color:var(--ivory)}
@media(max-width:900px){
  .promise-grid{grid-template-columns:1fr}
  .promise-plate{margin:-48px 14px 0;padding:28px 22px 24px}
}
/* partners: their own full-width row under the visit card */
.partners-row{margin-top:clamp(48px,6vw,80px);padding-top:clamp(36px,4vw,52px);border-top:1px solid var(--line)}
.partners-h{font-family:var(--disp);font-weight:800;font-size:clamp(1.8rem,2.6vw,2.4rem);letter-spacing:.03em;text-transform:uppercase;color:var(--ivory);text-align:center;margin:0 0 24px}
.plinks.plinks-row{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:0}
.plinks.plinks-row .ptile{min-height:132px}
@media(max-width:1000px){.plinks.plinks-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.plinks.plinks-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* edge picker label: plain readable text instead of tiny SVG lettering */
.edge-view{flex-direction:column;gap:10px}
.edge-dim{margin:0;font-family:var(--body);font-weight:600;font-size:16px;letter-spacing:0;color:var(--ivory)}
