/* Design Services section */
/* ---------- Section ---------- */
.services{padding:88px 0}
.services__head{display:grid;grid-template-columns:1.15fr 1fr;align-items:end;gap:64px;margin-bottom:44px}
.services__title{margin:0;font-size:clamp(44px,5vw,72px);font-weight:500;line-height:1.04;letter-spacing:-.04em;text-wrap:balance}
.services__intro{justify-self:end;max-width:460px;margin:0;color:var(--intro);font-size:18px;line-height:1.5;letter-spacing:-.015em;text-wrap:pretty}
.services__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

/* ---------- Card ---------- */
.card{
  --pad:32px;
  --glow-a:#dff6c9; --glow-b:#c9ece6;
  position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;min-height:520px;
  padding:var(--pad);overflow:hidden;border:1px solid var(--line);border-radius:28px;
  background:linear-gradient(145deg,#fff 40%,#f7f8fb);color:var(--ink);
  box-shadow:inset 0 1px 1px #fff,0 6px 16px rgba(40,40,56,.024);
  transition:border-color .3s;
}
.card::before{
  content:"";position:absolute;z-index:-1;inset:auto -10% -25%;height:70%;pointer-events:none;
  background:radial-gradient(45% 60% at 30% 70%,var(--glow-a) 0,transparent 70%),
             radial-gradient(45% 60% at 72% 80%,var(--glow-b) 0,transparent 70%);
  filter:blur(30px);opacity:.8;
}
.card[data-tone="lavender"]{--glow-a:#e0dbff;--glow-b:#f1d9ff}
.card[data-tone="mist"]{--glow-a:#d3e9f7;--glow-b:#dfe3ff}
.card:hover{border-color:#dcdde3}

.card__content{position:relative;z-index:2;display:flex;flex-direction:column;min-width:0;padding-right:52px;pointer-events:none}
.card__heading{margin-bottom:14px}
.card__title{margin:0;font-size:clamp(26px,2.3vw,34px);font-weight:500;line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.card__subtitle{margin:10px 0 0;color:var(--muted-2);font-size:14px;line-height:1.4}
.card__desc{margin:0;max-width:34ch;color:var(--muted);font-size:16px;line-height:1.45;letter-spacing:-.01em;text-wrap:pretty}

.card__art{position:relative;display:grid;place-items:center;flex-shrink:0;height:280px;margin:auto -16px -8px;padding-top:24px}
.card[data-tone="pearl"] .card__art{margin:auto calc(-1*var(--pad)) calc(-1*var(--pad));padding-top:0}

.card__link{
  position:absolute;z-index:3;top:28px;right:28px;display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;border:1px solid #e8e8ed;background:#fff;color:var(--ink);
  box-shadow:0 3px 6px rgba(36,37,59,.04);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
}
.card__link::after{content:"";position:absolute;inset:-8px}
.card:hover .card__link{transform:translateX(2px);box-shadow:0 6px 14px rgba(36,37,59,.08)}
.card__link:focus-visible{outline:2px solid var(--accent);outline-offset:5px}

/* =========================================================
   Scene 1: Tiles
   ========================================================= */
.tiles{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;overflow:hidden;
  background-image:linear-gradient(#eceef2 1px,transparent 0),linear-gradient(90deg,#eceef2 1px,transparent 0);
  background-size:8px 8px;background-position:50%;
  -webkit-mask-image:linear-gradient(transparent,#000 38%);mask-image:linear-gradient(transparent,#000 38%);
}
.tiles__row{
  display:flex;gap:10px;width:max-content;
  padding-right:10px; /* makes -50% land exactly on one loop, so there is no jump */
  animation:tileDrift 38s linear infinite paused;
}
.tiles__row[data-reverse="true"]{animation-direction:reverse;margin-left:-31px}
.tiles[data-playing="true"] .tiles__row{animation-play-state:running}
@keyframes tileDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.tile{
  --near:0;
  display:grid;place-items:center;flex-shrink:0;width:52px;height:52px;border-radius:14px;background:#fff;
  box-shadow:inset 0 1px 0 #fff,0 3px 8px rgba(42,43,61,.04);
  transform:translateY(calc(var(--near)*-6px)) scale(calc(1 + var(--near)*.12));
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),color .3s,box-shadow .3s;
  color:color-mix(in srgb,#6f7280 calc(var(--near)*100%),#b3b6c1);
}
.tile[data-kind="empty"]{background:#f3f4f7;box-shadow:inset 0 1px 2px rgba(42,43,61,.03)}
.tile svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile[data-kind="star"] svg{fill:currentColor;stroke:none}
.tile b{font-size:17px;font-weight:600;letter-spacing:-.04em;color:currentColor}
.tile .swatches{display:flex}
.tile .swatches i{width:11px;height:18px;border-radius:3px;margin-left:-3px;border:1.5px solid #fff}
.tile .swatches i:nth-child(1){background:#dcdee4}
.tile .swatches i:nth-child(2){background:#c3c6cf}
.tile .swatches i:nth-child(3){background:#a9adb8}
.tile .dot{width:18px;height:18px;border-radius:50%;opacity:.55;background:currentColor}

/* Same art box as the Design Services studies (Brand identity + Design partner) */
.card[data-tone="pearl"] .card__art,.card[data-tone="mist"] .card__art{display:grid;place-items:center;height:290px;margin:auto -12px -8px;padding:0}
/* Rotating seal on top of the tiles */
.card[data-tone="pearl"] .tiles{-webkit-mask-image:radial-gradient(75% 70% at 50% 55%,#000 45%,transparent 100%);mask-image:radial-gradient(75% 70% at 50% 55%,#000 45%,transparent 100%)}
.seal{position:relative;z-index:1;width:250px;max-width:100%;aspect-ratio:1;pointer-events:none}
.seal svg{overflow:visible}
.seal > svg{width:100%;height:100%}
.seal__dots{fill:rgba(255,255,255,.78);stroke:#d3d6df;stroke-width:1.5;stroke-dasharray:2 6}
.seal__in{fill:#fff;stroke:#eef0f3;filter:drop-shadow(0 14px 22px rgba(20,22,40,.16))}
.seal__rot{transform-origin:130px 130px;animation:sealRot 24s linear infinite}
.card:hover .seal__rot{animation-duration:6s}
.seal text{font-family:"Sudo",ui-monospace,monospace;font-size:13.5px;letter-spacing:.18em;fill:#18181c}
.seal__runner{transform-origin:130px 130px;animation:sealRot 4s cubic-bezier(.65,0,.35,1) infinite reverse}
.seal__runner circle{fill:var(--accent);filter:drop-shadow(0 0 6px #3548fe)}
@keyframes sealRot{to{transform:rotate(360deg)}}

/* =========================================================
   Scene 2: 3D wheel
   ========================================================= */
.wheel-scene{
  position:relative;width:100%;max-width:400px;height:100%;margin:0 auto;perspective:760px;cursor:grab;
  user-select:none;-webkit-user-select:none;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);
}
.wheel-scene:active{cursor:grabbing}
.wheel{position:absolute;inset:0;perspective:760px;transform:rotate(-7deg) rotateY(-10deg);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.wheel-scene:hover .wheel{transform:rotate(-4deg) rotateY(-4deg)}
.pill{
  position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:12px;min-width:62%;
  padding:9px 26px 9px 10px;border-radius:999px;
  background:linear-gradient(#fdfdfd,#f4f4f6);border:1px solid #fff;
  box-shadow:inset 0 1px 0 #fff,0 10px 22px rgba(42,43,61,.08),0 2px 4px rgba(42,43,61,.06);
  color:#8d8e98;font-size:17px;font-weight:500;letter-spacing:-.02em;white-space:nowrap;
  backface-visibility:hidden;will-change:transform,opacity,filter;transition:color .3s,box-shadow .3s;
}
.pill[data-front]{color:#232327;background:#fff;box-shadow:inset 0 1px 0 #fff,0 18px 34px rgba(42,43,61,.133),0 3px 6px rgba(42,43,61,.08)}
.pill__icon{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -2px 3px rgba(0,0,0,.133)}
.pill__icon svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================
   Scene 3: glass notifications (stack opens on hover)
   ========================================================= */
.notes{position:relative;width:100%;max-width:310px;height:250px;margin:0 auto}
.note{position:absolute;left:0;right:0;bottom:calc(20px + var(--n) * 10px);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:18px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 26px -10px rgba(20,22,40,.25),inset 0 1px 0 #fff;
  transform:scale(calc(1 - var(--n) * .05));opacity:calc(1 - var(--n) * .18);z-index:calc(10 - var(--n));transition:bottom .6s cubic-bezier(.34,1.56,.64,1),transform .6s cubic-bezier(.34,1.56,.64,1),opacity .4s}
.notes.is-open .note,.card:hover .note{bottom:calc(14px + var(--n) * 58px);transform:none;opacity:1}
.note > *{transition:opacity .3s}
.notes:not(.is-open) .note:not([data-front]) > *{opacity:0}
.card:hover .notes .note > *{opacity:1}
.note__ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--g);color:#fff;font-size:10px;font-weight:600;letter-spacing:-.02em;box-shadow:inset 0 1px 1px rgba(255,255,255,.4)}
.note b{display:block;font-size:13px;font-weight:600;color:#18181c}
.note small{display:block;font-size:11.5px;color:var(--muted)}
.note time{align-self:start;font-family:"Sudo",ui-monospace,monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.note.is-new{animation:noteIn .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes noteIn{from{transform:translateY(-30px) scale(.9);opacity:0}}
@media (max-width:540px){.notes.is-open .note:nth-child(4),.card:hover .notes .note:nth-child(4){opacity:0}}

/* ---------- Responsive ---------- */
@media (min-width:1101px) and (max-width:1300px){
  .card{--pad:26px;min-height:500px}
  .card__art{height:220px;margin-inline:-12px}
  .pill{font-size:15px;padding:7px 20px 7px 8px}
  .pill__icon{width:28px;height:28px}
}
@media (max-width:1100px) and (min-width:541px){
  .services__head{grid-template-columns:1fr;gap:20px}
  .services__intro{justify-self:start;max-width:560px}
  .services__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .card{--pad:28px;min-height:500px}
  .card__art{height:260px}
  .card[data-wide="true"]{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-items:stretch;min-height:320px}
  .card[data-wide="true"] .card__art{margin:0;padding:0;height:auto;min-height:240px}
  .card[data-wide="true"] .card__content{padding-right:0}
  .card[data-wide="true"] .card__link{inset:auto auto 26px 28px}
  .card[data-wide="true"]::before{inset:-20% -10% -20% 40%;height:auto}
}
@media (max-width:900px){
  .services{padding:56px 0 64px}
  .services__title{font-size:clamp(42px,7vw,56px)}
}
@media (max-width:900px) and (min-width:541px){
  .card:not([data-wide="true"]) .card__title{font-size:26px}
  .card__art{height:230px}
}
@media (max-width:540px){
  .container{padding-inline:16px}
  .services__title{font-size:42px}
  .services__intro{font-size:16px;justify-self:start}
  .services__head{grid-template-columns:1fr;gap:20px}
  .services__grid{grid-template-columns:1fr;gap:14px}
  .card{--pad:26px;min-height:0;border-radius:24px}
  .card__title{font-size:28px}
  .card__art{height:auto;aspect-ratio:400/260;margin:8px -12px -6px}
  .card__link{top:22px;right:22px}
  .tile{width:46px;height:46px;border-radius:12px}
  .tiles__row,.tiles{gap:8px}
  .tiles__row{padding-right:8px}
  .pill{font-size:15px}
}
@media (hover:none),(max-width:540px){
  .wheel-scene{-webkit-mask-image:none;mask-image:none}
  .wheel{transform:rotate(-5deg)}
  .pill{backface-visibility:visible;box-shadow:inset 0 1px 0 #fff,0 8px 16px rgba(42,43,61,.07)}
  .pill:not([data-front]){color:#a3a5ae}
}
@media (prefers-reduced-motion:reduce){
  .tiles__row,.seal__rot,.seal__runner{animation:none}
  .tile,.card__link,.note,.wheel{transition:none}
}