.svc{
.salks{ font-family:'Salks',sans-serif; font-weight:400; }
a{ color:inherit; text-decoration:none; }
/* ===== top nav (LOGO lives here only) ===== */
  .nav{ position:relative; z-index:30; display:flex; align-items:center; justify-content:space-between; padding:26px 56px 8px; max-width:1320px; margin:0 auto; }
.brand{ display:flex; align-items:center; gap:13px; }
.logo-chip{ width:62px; height:62px; border-radius:15px; background:var(--paper); border:3px solid var(--ink); display:grid; place-items:center; box-shadow:4px 4px 0 var(--ink); }
.logo-chip img{ width:42px; height:42px; object-fit:contain; }
.wordmark{ font-size:38px; color:var(--ink); letter-spacing:2px; line-height:1; }
.links{ display:flex; align-items:center; gap:28px; font-weight:600; font-size:14px; letter-spacing:.05em; text-transform:uppercase; }
.links .say{ padding:11px 22px; border-radius:100px; background:var(--ink); color:var(--paper); border:3px solid var(--ink); box-shadow:3px 3px 0 var(--amber); }
/* ===== marquee strip ===== */
  .strip{ background:var(--ink); border-top:4px solid var(--ink); border-bottom:4px solid var(--ink); padding:14px 0; overflow:hidden; display:flex; transform:rotate(-1.4deg) scale(1.04); margin:40px 0 0; }
.strip .track{ display:flex; width:max-content; }
.strip .item{ display:flex; align-items:center; gap:24px; padding-right:24px; flex:0 0 auto; }
.strip .item span{ font-family:'Salks',sans-serif; font-size:30px; color:var(--cream); white-space:nowrap; }
.strip .item b{ width:13px; height:13px; border-radius:99px; background:var(--amber); display:block; flex:0 0 auto; }
/* ===== intro heading ===== */
  .intro{ max-width:1280px; margin:0 auto; padding:78px 56px 30px; position:relative; }
.kicker{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; font-weight:800; font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); background:var(--amber); border:3px solid var(--ink); border-radius:100px; padding:9px 18px; box-shadow:4px 4px 0 var(--ink); transform:rotate(-2deg); }
h2.title{ margin:22px 0 0; font-family:'Salks',sans-serif; font-weight:400; line-height:.9; letter-spacing:-.01em; font-size:clamp(56px,10.5vw,168px); color:var(--ink); }
.title-mask{ display:block; overflow:hidden; }
.title-line{ display:inline-block; }
h2.title .q{ color:var(--orange); display:inline-block; transition:transform .25s ease; }
h2.title:hover .q{ transform:rotate(14deg) scale(1.15); }
.lede{ margin:26px 0 0; max-width:680px; font-size:clamp(17px,1.5vw,21px); line-height:1.5; color:var(--ink-soft); }
.lede b{ color:var(--ink); }
/* shared mascot helpers */
  .mascot-wrap{ position:absolute; pointer-events:none; z-index:6; will-change:transform; }
.mascot-wrap img{ display:block; width:100%; height:auto; filter:drop-shadow(0 16px 16px rgba(28,24,19,.16)); will-change:transform; }
#mascotIntro{ top:96px; right:5%; width:188px; transform:rotate(5deg); }
@media (max-width:860px){ .mascot-wrap{ display:none; } }
/* ===== pinned "known for" sequence ===== */
  .known{ position:relative; }
.known-inner{ height:100vh; min-height:660px; max-width:1280px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:0.92fr 1.08fr; gap:40px; align-items:center; }
.known-copy .pill{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:var(--paper); border:3px solid var(--ink); border-radius:100px; padding:8px 16px; box-shadow:3px 3px 0 var(--ink); }
.known-copy h3{ margin:22px 0 0; font-family:'Salks',sans-serif; font-weight:400; line-height:.95; font-size:clamp(36px,4vw,62px); color:var(--ink); max-width:12ch; }
.known-copy h3 em{ font-style:normal; color:var(--orange); }
.known-copy p{ margin:18px 0 0; font-size:17px; line-height:1.5; color:var(--ink-soft); max-width:40ch; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.chips span{ font-family:'Roboto'; font-weight:700; font-size:14px; color:var(--ink); background:var(--paper); border:2.5px solid var(--ink); border-radius:100px; padding:9px 16px; }
.chips span.hot{ background:var(--amber); }
.known-stage{ position:relative; height:560px; }
.kcard{ position:absolute; width:348px; border:3px solid var(--ink); border-radius:24px; box-shadow:7px 7px 0 var(--ink); background:var(--paper); padding:23px 25px 21px; display:flex; flex-direction:column; justify-content:space-between; min-height:172px; }
#kc1{ top:0; left:0; z-index:1; }
#kc2{ top:182px; left:58px; z-index:2; }
#kc3{ top:364px; left:14px; z-index:3; }
.kcard .num{ font-weight:800; font-size:14px; letter-spacing:.1em; color:var(--ink-soft); }
.kcard h3{ margin:12px 0 0; font-family:'Salks',sans-serif; font-weight:400; line-height:.96; font-size:40px; }
.kcard .krow{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:14px; }
.kcard .desc{ font-size:15px; line-height:1.4; color:var(--ink-soft); max-width:30ch; }
.karrow{ width:44px; height:44px; flex:0 0 auto; border:3px solid var(--ink); border-radius:12px; display:grid; place-items:center; transform:rotate(-8deg); }
.karrow svg{ width:18px; height:18px; }
.kcard.fill-orange{ background:var(--orange); color:var(--cream); }
.kcard.fill-orange .num,.kcard.fill-orange .desc{ color:rgba(253,243,227,.85); }
.kcard.fill-orange .karrow{ border-color:var(--cream); }
.kcard.fill-amber{ background:var(--amber); color:var(--ink); }
.kcard.fill-amber .num,.kcard.fill-amber .desc{ color:var(--ink-soft); }
#mascotKnown{ position:absolute; right:-30px; bottom:-22px; width:164px; z-index:4; }
#mascotKnown img{ transform:rotate(-6deg); }
/* ===== full menu grid (all services) ===== */
  .all-head{ max-width:1280px; margin:14px auto 0; padding:0 56px; }
.grid{ max-width:1280px; margin:30px auto 0; padding:0 56px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.card{
    grid-column:span 1; min-height:210px;
    border:3px solid var(--ink); border-radius:24px; background:var(--paper);
    box-shadow:6px 6px 0 var(--ink);
    padding:24px 24px 22px; display:flex; flex-direction:column; justify-content:space-between;
    cursor:pointer; position:relative; overflow:hidden;
    transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s, background .2s, color .2s;
  }
.card:hover{ transform:rotate(0deg) translateY(-8px) !important; box-shadow:12px 14px 0 var(--ink); background:var(--orange); color:var(--cream); }
.card:hover .num,.card:hover .desc{ color:var(--cream); }
.card:hover .arrow{ background:var(--cream); color:var(--orange); transform:rotate(0deg); }
.span2{ grid-column:span 2; }
.card .num{ font-weight:800; font-size:14px; letter-spacing:.1em; color:var(--ink-soft); transition:color .2s; }
.card h3{ margin:14px 0 0; font-family:'Salks',sans-serif; font-weight:400; line-height:.96; font-size:clamp(25px,2vw,36px); hyphens:auto; overflow-wrap:break-word; }
.span2 h3{ font-size:clamp(34px,3.2vw,56px); }
.card .desc{ margin:10px 0 0; font-size:15px; line-height:1.4; color:var(--ink-soft); max-width:34ch; transition:color .2s; }
.card .row{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:18px; }
.arrow{ width:42px; height:42px; flex:0 0 auto; border:3px solid var(--ink); border-radius:12px; background:transparent; display:grid; place-items:center; transform:rotate(-8deg); transition:transform .25s, background .2s, color .2s; }
.arrow svg{ width:18px; height:18px; }
.fill-orange{ background:var(--orange); color:var(--cream); }
.fill-orange .num,.fill-orange .desc{ color:rgba(253,243,227,.85); }
.fill-orange .arrow{ border-color:var(--cream); }
.fill-orange:hover{ background:var(--ink); }
.fill-orange:hover .arrow{ background:var(--cream); color:var(--ink); }
.fill-amber{ background:var(--amber); color:var(--ink); }
.fill-amber .num,.fill-amber .desc{ color:var(--ink-soft); }
.fill-amber:hover{ background:var(--ink); color:var(--cream); }
.fill-amber:hover .num,.fill-amber:hover .desc{ color:var(--cream); }
.fill-ink{ background:var(--ink); color:var(--cream); }
.fill-ink .num,.fill-ink .desc{ color:rgba(253,243,227,.8); }
.fill-ink .arrow{ border-color:var(--cream); }
.fill-ink:hover{ background:var(--amber); color:var(--ink); }
.fill-ink:hover .num,.fill-ink:hover .desc{ color:var(--ink-soft); }
.fill-ink:hover .arrow{ background:var(--ink); color:var(--amber); border-color:var(--ink); }
.more h3{ font-size:clamp(30px,2.8vw,46px); }
/* ===== CTA footer ===== */
  .foot{ position:relative; max-width:1280px; margin:74px auto 0; padding:0 56px 120px; display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.foot .cta{ display:inline-flex; align-items:center; gap:12px; background:var(--ink); color:var(--cream); font-family:'Salks',sans-serif; font-size:26px; padding:18px 34px; border:3px solid var(--ink); border-radius:100px; box-shadow:6px 6px 0 var(--amber); transition:transform .2s, box-shadow .2s; }
.foot .cta:hover{ transform:translate(-2px,-2px); box-shadow:9px 9px 0 var(--amber); }
.foot .note{ font-size:17px; color:var(--ink-soft); max-width:330px; line-height:1.45; }
#mascotFoot{ bottom:30px; right:3%; width:166px; transform:rotate(-4deg); }
.foot .note{ margin-right:190px; }
/* ===== responsive ===== */
  @media (max-width:899px){
    .links{ display:none; }
    .known-inner{ display:block; height:auto; padding:60px 30px; }
    .known-stage{ height:auto; margin-top:30px; }
    .kcard{ position:relative; top:auto !important; left:auto !important; width:100%; margin-bottom:18px; }
    .grid{ grid-template-columns:repeat(2,1fr); }
    .span2{ grid-column:span 2; }
  }
@media (max-width:560px){
    .nav{ padding:20px 22px 8px; }
    .intro{ padding:54px 24px 18px; }
    .grid{ grid-template-columns:1fr; padding:0 22px; }
    .span2{ grid-column:span 1; }
    .all-head,.foot{ padding-left:24px; padding-right:24px; }
  }
}

.svc{ background:var(--cream); }

/* ===== 3D CUBE (scroll-spun) ===== */
.svc .cube-known-inner{ align-items:center; }
.svc .cube-copy{ position:relative; }
.svc .cube-copy .pill{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:var(--paper); border:3px solid var(--ink); border-radius:100px; padding:8px 16px; box-shadow:3px 3px 0 var(--ink); }
.svc .cube-copy h3{ margin:22px 0 0; font-family:'Salks',sans-serif; font-weight:400; line-height:.95; font-size:clamp(36px,4vw,62px); color:var(--ink); max-width:13ch; }
.svc .cube-copy h3 em{ font-style:normal; color:var(--orange); }
.svc .cube-copy p{ margin:18px 0 0; font-size:17px; line-height:1.5; color:var(--ink-soft); max-width:42ch; }
.svc .more-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.svc .more-chips span{ font-family:'Roboto'; font-weight:700; font-size:14px; color:var(--ink); background:var(--paper); border:2.5px solid var(--ink); border-radius:100px; padding:9px 16px; }
.svc .more-chips span.hot{ background:var(--amber); }

.svc .cube-stage{ position:relative; height:520px; display:grid; place-items:center; perspective:1300px; }
.svc .cube{ position:relative; width:340px; height:340px; transform-style:preserve-3d; transform:rotateX(-14deg) rotateY(0deg); will-change:transform; }
.svc .face{ position:absolute; inset:0; border:3px solid var(--ink); border-radius:16px; padding:26px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:inset 0 0 0 2px rgba(255,255,255,.16); -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.svc .face .fn{ font-weight:800; font-size:13px; letter-spacing:.12em; }
.svc .face .fname{ font-family:'Salks',sans-serif; font-weight:400; line-height:.9; font-size:42px; }
.svc .face .fd{ font-size:14px; line-height:1.3; opacity:.86; margin-top:8px; }
.svc .face .frow{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.svc .face .farrow{ width:40px; height:40px; flex:0 0 auto; border:2.5px solid currentColor; border-radius:11px; display:grid; place-items:center; opacity:.92; }
.svc .face .farrow svg{ width:17px; height:17px; }
.svc .f-front{ transform:rotateY(0deg) translateZ(170px); background:var(--orange); color:var(--cream); }
.svc .f-back{ transform:rotateY(180deg) translateZ(170px); background:var(--ink); color:var(--cream); }
.svc .f-right{ transform:rotateY(90deg) translateZ(170px); background:var(--amber); color:var(--ink); }
.svc .f-left{ transform:rotateY(-90deg) translateZ(170px); background:var(--cream); color:var(--ink); }
.svc .f-top{ transform:rotateX(90deg) translateZ(170px) rotate(180deg); background:var(--paper); color:var(--ink); }
.svc .f-bottom{ transform:rotateX(-90deg) translateZ(170px) rotate(180deg); background:var(--orange); color:var(--cream); }
.svc .face{ backface-visibility:hidden; }
.svc .cube-hint{ position:absolute; right:6px; bottom:2px; font-family:'Salks',sans-serif; font-size:20px; color:var(--ink); background:var(--amber); border:3px solid var(--ink); border-radius:100px; padding:7px 15px; box-shadow:4px 4px 0 var(--ink); transform:rotate(6deg); pointer-events:none; }
@media (max-width:900px){ .svc .cube-stage{ height:400px; } }
@media (max-width:420px){
  .svc .cube-stage{ height:260px; }
  .svc .cube{ width:190px; height:190px; }
  .svc .f-front{ transform:rotateY(0deg) translateZ(95px); }
  .svc .f-back{ transform:rotateY(180deg) translateZ(95px); }
  .svc .f-right{ transform:rotateY(90deg) translateZ(95px); }
  .svc .f-left{ transform:rotateY(-90deg) translateZ(95px); }
  .svc .f-top{ transform:rotateX(90deg) translateZ(95px) rotate(180deg); }
  .svc .f-bottom{ transform:rotateX(-90deg) translateZ(95px) rotate(180deg); }
  .svc .face{ padding:14px; }
  .svc .face .fname{ font-size:24px; }
  .svc .face .fn{ font-size:11px; }
  .svc .face .fd{ font-size:12px; }
}