/* DRSTY · "Six ways in" — the home page #services section, shared with the Grounds pages.
   Source of truth: index.html (#services). Keep both in sync if either changes. */
#services{--signal:#FF1212;--ease-drsty:cubic-bezier(.16,1,.3,1);
  --st-neon:url('/assets/img/img-15555e7e55.webp');--st-board:url('/assets/img/img-f5d630909c.webp');--st-wide:url('/assets/img/img-bd89534286.webp');
  font-family:'Inter',system-ui,sans-serif;color:#F5F5F5;text-align:left}
#services *{box-sizing:border-box}
:where(#services) :where(h2,h3,p){margin:0}
#services{position:relative;background:#050505;padding:18vh 6vw 16vh}
.sv-lede{max-width:min(760px,86vw);margin-bottom:9vh}
.sv-kicker{font-family:'Fragment Mono',monospace;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.34)}
.sv-lede h2{margin-top:22px;font-weight:500;letter-spacing:-.06em;line-height:.96;
  font-size:clamp(32px,5.2vw,84px);color:#F5F5F5}
.sv-lede h2 em{font-style:normal;color:var(--signal)}
.sv-lede p{margin-top:22px;color:rgba(255,255,255,.5);font-size:17px;line-height:1.55;
  max-width:52ch}

/* ── pixel dino sticker (Six ways in) ── */
#services .dino{position:absolute;z-index:4;top:calc(18vh + 80px);right:7vw;width:150px;height:134px;padding:0;border:0;background:none;cursor:pointer;
  transform:rotate(7deg);-webkit-tap-highlight-color:transparent;animation:dinoBob 3.2s ease-in-out infinite}
#services .dino-spr{position:absolute;inset:0;background:url('/assets/dino-sprite-v3.png') 0 0/200% 100% no-repeat;image-rendering:pixelated;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(255,31,22,.18));transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
#services .dino-shadow{position:absolute;left:22%;right:18%;bottom:-14px;height:10px;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(4px);transition:transform .35s}
#services .dino-say{position:absolute;right:62%;bottom:88%;width:max-content;max-width:250px;padding:12px 14px;background:#fff;color:#0a0a0a;
  font:600 12.5px/1.35 'Fragment Mono',monospace;letter-spacing:-.01em;text-align:left;transform:rotate(-7deg) translateY(8px) scale(.85);transform-origin:100% 100%;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1);
  box-shadow:4px 0 0 #fff,-4px 0 0 #fff,0 4px 0 #fff,0 -4px 0 #fff,8px 8px 0 var(--signal)}
#services .dino-say::after{content:'';position:absolute;right:-4px;bottom:-14px;width:12px;height:12px;background:#fff;
  clip-path:polygon(0 0,100% 0,100% 100%)}
#services .dino-say b{font-weight:600}
#services .dino.talk .dino-say{opacity:1;transform:rotate(-7deg) translateY(0) scale(1)}
#services .dino.talk .dino-spr{animation:dinoRun .26s steps(1) infinite;transform:translateY(-10px) rotate(-3deg)}
#services .dino.talk .dino-shadow{transform:scale(.8)}
#services .dino:focus-visible{outline:2px dashed var(--signal);outline-offset:6px}
@keyframes dinoRun{0%{background-position:0 0}50%{background-position:100% 0}}
@keyframes dinoBob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media (max-width:900px){#services .dino{top:calc(12vh + 36px);right:5vw;width:80px;height:71px}
  #services .dino-say{max-width:210px;font-size:11.5px;right:30%;bottom:auto;top:108%;transform-origin:100% 0}
  #services .dino-say::after{bottom:auto;top:-14px;clip-path:polygon(0 100%,100% 0,100% 100%)}}
@media (prefers-reduced-motion:reduce){#services .dino,#services .dino.talk .dino-spr{animation:none}}
.sv-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;
  grid-auto-rows:minmax(210px,auto)}
.sv{position:relative;overflow:hidden;background:#0E0E0E;
  border:1px solid rgba(255,255,255,.07);padding:30px 30px 28px;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:border-color .45s var(--ease-drsty),transform .45s var(--ease-drsty)}
.sv-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.42;transition:opacity .6s var(--ease-drsty),transform .9s var(--ease-drsty)}
.sv-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,5,5,.15) 0%,rgba(5,5,5,.82) 74%,rgba(5,5,5,.92) 100%)}
.sv-no{position:relative;font-family:'Fragment Mono',monospace;font-size:10.5px;
  letter-spacing:.2em;color:var(--signal);margin-bottom:auto}
.sv h3{position:relative;font-weight:500;letter-spacing:-.045em;line-height:1.02;
  font-size:clamp(21px,2.15vw,34px);color:#F5F5F5;margin-top:28px}
.sv p{position:relative;margin-top:12px;font-size:14.5px;line-height:1.55;
  color:rgba(255,255,255,.48);max-width:34ch}
.sv b{color:rgba(255,255,255,.9);font-weight:500}
/* the red rule that grows on hover */
.sv-line{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--signal);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease-drsty)}
.sv:hover{border-color:rgba(255,255,255,.16);transform:translateY(-4px)}
.sv:hover .sv-line{transform:scaleX(1)}
.sv:hover .sv-bg{opacity:.58;transform:scale(1.05)}

/* the accent tile — brand red, black ink */
.sv.red{background:var(--signal);border-color:var(--signal)}
.sv.red .sv-no{color:rgba(0,0,0,.55)}
.sv.red h3{color:#000}
.sv.red p{color:rgba(0,0,0,.68)}
.sv.red b{color:#000}
.sv.red .sv-line{background:#000}
.sv.red:hover{border-color:#000}

/* explicit placement — sparse auto-flow pushes the 2-row tiles out of line */
.sv-a{grid-column:1/6;  grid-row:1/3}
.sv-b{grid-column:6/10; grid-row:1/2}
.sv-c{grid-column:6/10; grid-row:2/3}
.sv-d{grid-column:10/13;grid-row:1/3}
.sv-e{grid-column:1/8;  grid-row:3/4}
.sv-f{grid-column:8/13; grid-row:3/4}

@media (max-width:1024px){
  .sv-grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(190px,auto)}
  .sv-a{grid-column:1/7;grid-row:1/2}
  .sv-b{grid-column:1/4;grid-row:2/3}
  .sv-c{grid-column:4/7;grid-row:2/3}
  .sv-d{grid-column:1/7;grid-row:3/4}
  .sv-e{grid-column:1/4;grid-row:4/5}
  .sv-f{grid-column:4/7;grid-row:4/5}
}
@media (max-width:768px){
  #services{padding:12vh 5vw 12vh}
  .sv-lede{margin-bottom:6vh}
  .sv-grid{grid-template-columns:1fr;gap:10px;grid-auto-rows:minmax(0,auto)}
  .sv-a,.sv-b,.sv-c,.sv-d,.sv-e,.sv-f{grid-column:1/2;grid-row:auto}
  .sv{padding:22px 20px 22px;min-height:0}
  .sv h3{margin-top:20px}
  .sv p{max-width:none}
}
#services{overflow:hidden;isolation:isolate}
#services>.sv-lede,#services>.sv-grid{position:relative;z-index:2}
.sv-atmo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14vh,#000 calc(100% - 14vh),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14vh,#000 calc(100% - 14vh),transparent 100%)}
.sv-atmo i{position:absolute;display:block;will-change:transform,opacity}
/* big red panel entering from the top edge */
.sva-panel{top:-14vh;right:-8vw;width:62vw;height:104vh;
  clip-path:polygon(34% 0,100% 0,100% 74%,64% 100%,0 30%);
  background:linear-gradient(204deg,#FF1F16 0%,#e8170f 22%,#8f0a06 50%,#2a0100 74%,rgba(5,5,5,0) 92%)}
.sva-panel-glow{top:-6vh;right:-4vw;width:52vw;height:80vh;border-radius:40%;
  background:radial-gradient(closest-side,rgba(255,31,22,.45),rgba(255,31,22,0));filter:blur(70px);opacity:.7}
/* a second, quieter form entering from the bottom-left */
.sva-shard{left:-10vw;bottom:-8vh;width:40vw;height:62vh;opacity:.6;
  clip-path:polygon(0 34%,72% 0,100% 100%,0 100%);
  background:linear-gradient(24deg,#a30c07 0%,#4a0302 42%,rgba(5,5,5,0) 82%)}
/* brutalist hairline cut */
.sva-cut{left:-5vw;right:-5vw;top:58%;height:1px;transform:rotate(-8deg);
  background:linear-gradient(90deg,transparent,rgba(255,31,22,.35) 30%,rgba(255,31,22,.15) 70%,transparent)}
/* keep the lede on black */
.sva-shade{inset:0;background:
  radial-gradient(62% 40% at 18% 20%,rgba(5,5,5,.95) 0%,rgba(5,5,5,.7) 55%,rgba(5,5,5,0) 100%)}
/* cards: dark glass, hairline borders, restrained red ambience */
#services .sv{background:rgba(13,13,13,.9);border-color:rgba(255,255,255,.085);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 60px -34px rgba(0,0,0,.9);
  transition:border-color .45s var(--ease-drsty),transform .45s var(--ease-drsty),box-shadow .6s var(--ease-drsty)}
#services .sv::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,31,22,.16),transparent 60%);
  mix-blend-mode:screen;transition:opacity .5s}
#services .sv:hover::after{opacity:1}
#services .sv:hover{border-color:rgba(255,31,22,.42);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 26px 70px -28px rgba(255,31,22,.38)}
#services .sv-a,#services .sv-d{box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 60px -34px rgba(0,0,0,.9),0 0 90px -40px rgba(255,31,22,.35)}
#services .sv-bg{opacity:.34}
#services .sv:hover .sv-bg{opacity:.48}
#services .sv-no{font-weight:600}
/* featured card */
#services .sv.red{background:linear-gradient(150deg,#FF2F24 0%,#FF1F16 46%,#c9110b 100%);border-color:rgba(255,120,110,.5);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 40px 90px -30px rgba(255,31,22,.55)}
#services .sv.red::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.18),transparent 60%)}
#services .sv.red:hover{border-color:#000;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 46px 100px -28px rgba(255,31,22,.7)}
@media (max-width:1100px){
  .sva-panel{width:80vw;right:-30vw;height:80vh;opacity:.85}
  .sva-shard{width:60vw;left:-28vw}
}
@media (max-width:700px){
  .sva-panel{top:-6vh;right:-46vw;width:96vw;height:48vh;opacity:.7}
  .sva-panel-glow{width:90vw;height:40vh;right:-40vw;opacity:.45}
  .sva-shard{display:none}
  .sva-cut{top:40%}
  .sva-shade{background:radial-gradient(90% 30% at 30% 12%,rgba(5,5,5,.95),rgba(5,5,5,.6) 60%,rgba(5,5,5,0))}
  #services .sv{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(12,12,12,.9)}
}