/* INKR Creative — service detail pages, build b36. */

/* Homepage discipline rows become clear, fully clickable destinations. */
a.service-row.service-row-link{
  position:relative;
  color:inherit;
  padding-right:64px;
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease;
}
a.service-row.service-row-link::after{
  content:"";
  position:absolute;
  right:22px;
  top:50%;
  width:34px;
  height:34px;
  background-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 15 15 5M8 5h7v7' fill='none' stroke='%2366E1F2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:center;
  background-repeat:no-repeat;
  background-size:17px 17px;
  transform:translateY(-50%);
  border:1px solid var(--fog);
  border-radius:50%;
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease;
}
a.service-row.service-row-link:hover{
  transform:translateX(5px);
  background:rgba(102,225,242,.09);
}
a.service-row.service-row-link:hover::after{
  transform:translateY(-50%) scale(1.08);
  border-color:var(--ink);
}

body.service-detail{min-height:100vh;overflow-x:hidden;background:var(--paper);}
body.service-detail header.site-nav{backdrop-filter:none;background:rgba(247,245,240,.98);}
html[data-theme="dark"] body.service-detail header.site-nav{background:rgba(20,21,26,.98);}

.service-hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--fog);
  padding:88px 0 96px;
  background:
    radial-gradient(circle at 84% 18%,rgba(102,225,242,.18),transparent 24rem),
    linear-gradient(180deg,rgba(255,255,255,.18),transparent 70%);
}
.service-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,.82fr);
  gap:64px;
  align-items:center;
}
.service-breadcrumb{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:30px;
  font-family:"Courier New",Consolas,monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.7px;
  text-transform:uppercase;
  color:var(--slate);
}
.service-breadcrumb a{border-bottom:1px solid transparent;}
.service-breadcrumb a:hover{color:var(--ink);border-color:var(--teal);}
.service-number{display:inline-flex;align-items:center;gap:9px;color:var(--teal);}
.service-number::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral);}
.service-title{
  max-width:760px;
  margin:14px 0 24px;
  font-size:clamp(52px,7vw,96px);
  line-height:.94;
  letter-spacing:-.062em;
  font-weight:800;
}
.service-title em{color:var(--teal);font-style:normal;}
.service-lede{max-width:700px;font-size:clamp(18px,2vw,22px);line-height:1.55;color:var(--slate);}
.service-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:34px;}
.service-text-link{font-size:14px;font-weight:800;border-bottom:1px solid var(--ink);padding:9px 0;}
.service-text-link:hover{color:var(--teal);border-color:var(--teal);}

.inkling-stage{
  position:relative;
  min-height:440px;
  border:1px solid var(--fog);
  border-radius:30px;
  overflow:hidden;
  background:
    linear-gradient(rgba(216,211,196,.28) 1px,transparent 1px),
    linear-gradient(90deg,rgba(216,211,196,.28) 1px,transparent 1px),
    rgba(255,255,255,.38);
  background-size:36px 36px;
  box-shadow:0 28px 70px rgba(20,21,26,.08);
  isolation:isolate;
  cursor:pointer;
}
html[data-theme="dark"] .inkling-stage{background-color:rgba(255,255,255,.025);box-shadow:none;}
.stage-label{
  position:absolute;left:22px;top:20px;z-index:8;
  font-family:"Courier New",Consolas,monospace;font-size:10px;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--slate);
}
.stage-replay{
  position:absolute;right:17px;top:15px;z-index:10;
  border:1px solid var(--fog);border-radius:100px;background:var(--paper);color:var(--ink);
  padding:8px 12px;font-size:11px;font-weight:800;cursor:pointer;
}
.stage-replay{display:inline-flex;align-items:center;gap:6px;min-height:36px;}
.stage-replay svg{width:14px;height:14px;flex:0 0 auto;}
.stage-replay:hover{border-color:var(--teal);color:var(--teal);}
.stage-floor{position:absolute;left:12%;right:12%;bottom:44px;height:2px;background:var(--fog);}
.stage-floor::after{content:"";position:absolute;left:50%;top:-5px;width:120px;height:12px;transform:translateX(-50%);border-radius:50%;background:rgba(20,21,26,.08);}

.service-inkling{
  position:absolute;left:50%;bottom:43px;z-index:6;
  width:166px;height:178px;
  transform:translateX(-50%);
  animation:inkling-arrive 1s cubic-bezier(.2,.9,.24,1.3) .12s both;
}
.service-inkling svg{width:100%;height:100%;overflow:visible;}
.service-inkling .inkling-tentacles{transform-origin:50% 66%;animation:inkling-wave 1.25s ease-in-out .82s both;}
.service-inkling .inkling-eyes{transform-origin:center;transition:transform .08s ease-out;}
@keyframes inkling-arrive{0%{opacity:0;transform:translate(-50%,90px) scale(.72) rotate(-7deg);}68%{opacity:1;transform:translate(-50%,-8px) scale(1.04) rotate(2deg);}100%{opacity:1;transform:translate(-50%,0) scale(1) rotate(0);}}
@keyframes inkling-wave{0%,100%{transform:skewX(0)}42%{transform:skewX(9deg)}72%{transform:skewX(-6deg)}}
.service-reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.25,1);}
.service-reveal.is-visible{opacity:1;transform:translateY(0);}

/* Brand identity: Inkling stamps a mark and fans out the palette. */
.brand-stamp{position:absolute;left:50%;top:72px;z-index:3;width:82px;height:82px;margin-left:-41px;border:3px solid var(--teal);border-radius:50%;opacity:0;animation:brand-stamp 1s cubic-bezier(.2,.9,.3,1.3) 1.15s both;}
.brand-stamp::before{content:"INKR";position:absolute;inset:0;display:grid;place-items:center;font-family:"Courier New",monospace;font-size:14px;font-weight:900;letter-spacing:2px;transform:rotate(-8deg);}
.brand-stamp::after{content:"";position:absolute;right:-9px;top:10px;width:14px;height:14px;border-radius:50%;background:var(--coral);}
.brand-swatch{position:absolute;bottom:102px;left:50%;width:68px;height:92px;border-radius:12px;border:1px solid rgba(20,21,26,.12);transform-origin:50% 120%;opacity:0;}
.brand-swatch.s1{background:var(--coral);animation:swatch-one .7s ease 1.55s both;}
.brand-swatch.s2{background:var(--mint);animation:swatch-two .7s ease 1.68s both;}
.brand-swatch.s3{background:var(--ink);animation:swatch-three .7s ease 1.81s both;}
@keyframes brand-stamp{0%{opacity:0;transform:translateY(-70px) scale(1.35) rotate(16deg)}62%{opacity:1;transform:translateY(8px) scale(.88) rotate(-8deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(-8deg)}}
@keyframes swatch-one{to{opacity:1;transform:translate(-132px,12px) rotate(-24deg)}}
@keyframes swatch-two{to{opacity:1;transform:translate(64px,4px) rotate(20deg)}}
@keyframes swatch-three{to{opacity:1;transform:translate(105px,22px) rotate(32deg)}}

/* Web design: interface cards compose themselves around Inkling. */
.wire-card{position:absolute;z-index:2;width:142px;height:102px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:13px;opacity:0;}
.wire-card::before,.wire-card::after{content:"";display:block;border-radius:100px;background:var(--fog);}
.wire-card::before{width:58%;height:8px;margin-bottom:12px;background:var(--teal);}
.wire-card::after{width:88%;height:34px;box-shadow:0 13px 0 -5px var(--fog);}
.wire-card.w1{left:34px;top:78px;animation:wire-left .8s cubic-bezier(.2,.9,.3,1.15) .9s both;}
.wire-card.w2{right:28px;top:122px;animation:wire-right .8s cubic-bezier(.2,.9,.3,1.15) 1.2s both;}
.wire-card.w3{left:56px;bottom:48px;width:112px;height:78px;animation:wire-left .8s cubic-bezier(.2,.9,.3,1.15) 1.45s both;}
@keyframes wire-left{0%{opacity:0;transform:translate(-55px,30px) rotate(-9deg)}100%{opacity:1;transform:translate(0,0) rotate(-3deg)}}
@keyframes wire-right{0%{opacity:0;transform:translate(55px,-20px) rotate(10deg)}100%{opacity:1;transform:translate(0,0) rotate(4deg)}}

/* Development: a compact code window builds line by line. */
.code-window{position:absolute;left:50%;top:72px;z-index:2;width:78%;height:160px;transform:translateX(-50%);border:2px solid var(--ink);border-radius:16px;background:var(--ink);padding:48px 22px 18px;opacity:0;animation:code-window .75s cubic-bezier(.2,.9,.3,1.1) .75s both;}
.code-window::before{content:"●  ●  ●";position:absolute;left:18px;top:13px;color:var(--coral);font-size:13px;letter-spacing:6px;}
.code-line{height:9px;border-radius:100px;background:var(--mint);margin-bottom:13px;transform-origin:left;animation:code-line .6s ease both;}
.code-line:nth-child(1){width:74%;animation-delay:1.25s}.code-line:nth-child(2){width:48%;animation-delay:1.42s}.code-line:nth-child(3){width:84%;animation-delay:1.59s}.code-line:nth-child(4){width:61%;animation-delay:1.76s;background:var(--coral)}
@keyframes code-window{0%{opacity:0;transform:translate(-50%,-34px) scale(.92)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes code-line{0%{transform:scaleX(0);opacity:0}100%{transform:scaleX(1);opacity:1}}

/* Applications: browser and phone frames slide into a responsive pair. */
.device{position:absolute;z-index:2;border:2px solid var(--ink);background:var(--paper);opacity:0;overflow:hidden;}
.device::before{content:"";position:absolute;background:var(--teal);}
.device-browser{left:28px;top:86px;width:245px;height:156px;border-radius:16px;animation:device-browser .85s cubic-bezier(.2,.9,.3,1.15) .7s both;}
.device-browser::before{left:16px;right:16px;top:38px;height:68px;border-radius:10px;box-shadow:0 82px 0 -30px var(--fog);}
.device-browser::after{content:"•••";position:absolute;left:15px;top:6px;color:var(--coral);letter-spacing:4px;font-weight:900;}
.device-phone{right:42px;top:130px;width:96px;height:184px;border-radius:22px;animation:device-phone .85s cubic-bezier(.2,.9,.3,1.15) 1.08s both;}
.device-phone::before{left:11px;right:11px;top:28px;height:98px;border-radius:12px;background:var(--mint);box-shadow:0 116px 0 -45px var(--coral);}
@keyframes device-browser{0%{opacity:0;transform:translateX(-70px) rotate(-8deg)}100%{opacity:1;transform:translateX(0) rotate(-2deg)}}
@keyframes device-phone{0%{opacity:0;transform:translateX(70px) rotate(9deg)}100%{opacity:1;transform:translateX(0) rotate(4deg)}}

/* Growth: bars rise and a trend line draws upward. */
.growth-chart{position:absolute;left:40px;right:40px;top:80px;height:205px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.growth-bars{position:absolute;left:34px;right:30px;bottom:0;height:100%;display:flex;align-items:flex-end;gap:16px;}
.growth-bar{flex:1;border-radius:8px 8px 0 0;background:var(--mint);transform-origin:bottom;animation:bar-rise .7s cubic-bezier(.2,.9,.3,1.15) both;}
.growth-bar:nth-child(1){height:27%;animation-delay:.7s}.growth-bar:nth-child(2){height:43%;animation-delay:.86s}.growth-bar:nth-child(3){height:60%;animation-delay:1.02s}.growth-bar:nth-child(4){height:78%;animation-delay:1.18s;background:var(--teal)}.growth-bar:nth-child(5){height:96%;animation-delay:1.34s;background:var(--coral)}
.growth-arrow{position:absolute;right:18px;top:42px;width:50px;height:50px;color:var(--teal);opacity:0;animation:arrow-up .8s cubic-bezier(.2,.9,.3,1.2) 1.65s both;}
.growth-arrow::before{content:"";position:absolute;left:5px;top:24px;width:42px;height:3px;border-radius:3px;background:currentColor;transform:rotate(-45deg);transform-origin:center;}
.growth-arrow::after{content:"";position:absolute;right:4px;top:3px;width:16px;height:16px;border-top:3px solid currentColor;border-right:3px solid currentColor;border-radius:1px;}
@keyframes bar-rise{0%{transform:scaleY(0);opacity:0}100%{transform:scaleY(1);opacity:1}}
@keyframes arrow-up{0%{opacity:0;transform:translate(-25px,35px) rotate(-15deg)}100%{opacity:1;transform:translate(0,0) rotate(0)}}

/* AI automation: nodes connect in sequence, then settle. */
.ai-network{position:absolute;inset:54px 24px 88px;z-index:2;}
.ai-node{position:absolute;width:54px;height:54px;border:2px solid var(--ink);border-radius:16px;background:var(--paper);display:grid;place-items:center;font-weight:900;color:var(--teal);opacity:0;animation:node-pop .55s cubic-bezier(.2,.9,.3,1.25) both;}
.ai-node.n1{left:4%;top:12%;animation-delay:.65s}.ai-node.n2{right:6%;top:4%;animation-delay:.9s}.ai-node.n3{left:2%;bottom:5%;animation-delay:1.15s}.ai-node.n4{right:3%;bottom:7%;animation-delay:1.4s}.ai-node.n5{left:50%;top:26%;margin-left:-27px;background:var(--ink);color:var(--mint);animation-delay:1.65s}
.ai-link{position:absolute;height:2px;background:var(--teal);transform-origin:left;transform:scaleX(0);animation:link-draw .55s ease both;}
.ai-link.l1{left:17%;top:26%;width:35%;transform:rotate(12deg) scaleX(0);animation-delay:1.15s}.ai-link.l2{left:51%;top:26%;width:31%;transform:rotate(-14deg) scaleX(0);animation-delay:1.4s}.ai-link.l3{left:16%;top:72%;width:37%;transform:rotate(-17deg) scaleX(0);animation-delay:1.65s}.ai-link.l4{left:52%;top:54%;width:34%;transform:rotate(19deg) scaleX(0);animation-delay:1.9s}
@keyframes node-pop{0%{opacity:0;transform:scale(.3) rotate(-12deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes link-draw{to{transform:rotate(var(--link-angle,0deg)) scaleX(1)}}
.ai-link.l1{--link-angle:12deg}.ai-link.l2{--link-angle:-14deg}.ai-link.l3{--link-angle:-17deg}.ai-link.l4{--link-angle:19deg}

/* Replaying restarts every animation inside the stage. */
.inkling-stage.replay *{animation-name:none !important;}

.service-intro{padding:100px 0 56px;}
.service-section-head{display:grid;grid-template-columns:.72fr 1.28fr;gap:58px;align-items:start;margin-bottom:42px;}
.service-kicker{font-family:"Courier New",Consolas,monospace;font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--teal);}
.service-section-head h2{font-size:clamp(34px,4.4vw,58px);line-height:1.04;letter-spacing:-.045em;}
.service-section-head p{margin-top:18px;max-width:700px;font-size:18px;line-height:1.65;color:var(--slate);}
.capability-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--fog);border-left:1px solid var(--fog);}
.capability-card{min-height:250px;padding:34px;border-right:1px solid var(--fog);border-bottom:1px solid var(--fog);background:rgba(255,255,255,.18);}
.capability-index{font-family:"Courier New",Consolas,monospace;font-size:11px;font-weight:800;color:var(--coral);letter-spacing:1.5px;}
.capability-card h3{margin:45px 0 13px;font-size:25px;letter-spacing:-.025em;}
.capability-card p{font-size:15.5px;line-height:1.65;color:var(--slate);}

.service-process{padding:82px 0 100px;}
.process-list{margin-top:45px;border-top:1px solid var(--fog);}
.process-step{display:grid;grid-template-columns:90px .75fr 1.25fr;gap:28px;align-items:start;padding:34px 0;border-bottom:1px solid var(--fog);}
.process-step span{font-family:"Courier New",Consolas,monospace;font-size:11px;font-weight:800;color:var(--teal);letter-spacing:1.5px;}
.process-step h3{font-size:24px;letter-spacing:-.025em;}
.process-step p{font-size:15.5px;line-height:1.65;color:var(--slate);}

.service-outcomes{padding:92px 0;background:var(--ink);color:var(--paper);}
.outcomes-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:74px;align-items:start;}
.service-outcomes .service-kicker{color:var(--mint);}
.service-outcomes h2{margin-top:16px;font-size:clamp(38px,4.7vw,62px);line-height:1.02;letter-spacing:-.045em;}
.outcome-list{display:grid;gap:1px;background:rgba(247,245,240,.18);border:1px solid rgba(247,245,240,.18);}
.outcome-item{display:flex;gap:17px;padding:22px;background:var(--ink);font-size:16px;line-height:1.5;}
.outcome-item::before{content:"✓";color:var(--mint);font-weight:900;}

.service-explore{padding:96px 0;}
.service-explore-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:34px;}
.service-explore h2{font-size:clamp(34px,4vw,52px);letter-spacing:-.04em;}
.service-explore-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--fog);border-left:1px solid var(--fog);}
.service-next{position:relative;min-height:170px;padding:24px;border-right:1px solid var(--fog);border-bottom:1px solid var(--fog);transition:background .2s ease,color .2s ease;}
.service-next span{display:block;font-family:"Courier New",Consolas,monospace;font-size:10px;color:var(--teal);letter-spacing:1.5px;margin-bottom:48px;}
.service-next strong{display:block;max-width:85%;font-size:19px;line-height:1.2;}
.service-next::before{content:"";position:absolute;right:21px;bottom:27px;width:18px;height:2px;border-radius:2px;background:currentColor;transform:rotate(-45deg);}
.service-next::after{content:"";position:absolute;right:20px;bottom:27px;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;}
.service-next:hover,.service-next[aria-current="page"]{background:var(--teal);color:var(--ink);}
.service-next:hover span,.service-next[aria-current="page"] span{color:var(--ink);}

.service-cta{padding:100px 0;border-top:1px solid var(--fog);text-align:center;}
.service-cta h2{max-width:850px;margin:0 auto 28px;font-size:clamp(42px,6vw,76px);line-height:.98;letter-spacing:-.055em;}
.service-cta h2 em{font-style:normal;color:var(--teal);}

@media (max-width:960px){
  .service-hero-grid{grid-template-columns:1fr;gap:48px;}
  .inkling-stage{min-height:410px;max-width:680px;width:100%;}
  .service-section-head,.outcomes-grid{grid-template-columns:1fr;gap:24px;}
  .service-explore-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:700px){
  a.service-row.service-row-link{padding-right:52px;}
  a.service-row.service-row-link::after{right:10px;width:31px;height:31px;}
  .service-hero{padding:46px 0 60px;}
  .service-hero-grid{gap:32px;}
  .service-breadcrumb{margin-bottom:22px;}
  .service-title{font-size:clamp(40px,13vw,60px);line-height:.98;overflow-wrap:anywhere;}
  .service-lede{font-size:17px;line-height:1.55;}
  .service-actions{align-items:stretch;gap:10px;margin-top:26px;}
  .service-actions .btn-primary{width:100%;justify-content:center;text-align:center;}
  .service-text-link{align-self:flex-start;}
  .inkling-stage{min-height:340px;border-radius:22px;}
  .stage-label{left:17px;top:17px;max-width:54%;line-height:1.35;}
  .stage-replay{right:12px;top:11px;}
  .service-inkling{width:138px;height:150px;}
  .brand-swatch{width:54px;height:76px;}
  .wire-card{transform:scale(.8);}
  .wire-card.w1{left:8px}.wire-card.w2{right:5px}.wire-card.w3{left:22px}
  .device-browser{left:12px;width:210px}.device-phone{right:16px;width:84px;}
  .growth-chart{left:24px;right:24px;}.growth-bars{gap:9px;left:20px;right:18px;}
  .service-intro,.service-explore{padding:72px 0;}
  .capability-grid{grid-template-columns:1fr;}
  .capability-card{min-height:0;padding:24px;}
  .capability-card h3{margin-top:30px;}
  .process-step{grid-template-columns:52px 1fr;gap:16px 18px;}
  .process-step p{grid-column:2;}
  .service-outcomes{padding:72px 0;}
  .service-explore-grid{grid-template-columns:1fr;}
  .service-explore-head{align-items:start;flex-direction:column;}
  .outcome-item{padding:18px;font-size:15px;}
}
@media (max-width:420px){
  .inkling-stage{min-height:316px;}
  .service-inkling{width:124px;height:136px;}
  .device-browser{left:8px;top:80px;width:178px;height:136px;}
  .device-phone{right:10px;top:118px;width:72px;height:158px;}
  .growth-chart{left:18px;right:18px;top:78px;height:180px;}
  .growth-arrow{right:8px;top:48px;transform:scale(.82);}
  .process-step{grid-template-columns:40px 1fr;gap:14px;}
  .service-next{min-height:150px;padding:20px;}
}
@media (prefers-reduced-motion:reduce){
  a.service-row.service-row-link,.service-next,.stage-replay{transition:none;}
  .inkling-stage *{animation:none !important;}
  .service-reveal{opacity:1;transform:none;transition:none;}
  .service-inkling,.brand-stamp,.brand-swatch,.wire-card,.code-window,.code-line,.device,.growth-bar,.growth-arrow,.ai-node,.ai-link{opacity:1;}
  .service-inkling{transform:translateX(-50%);}
  .brand-stamp{transform:rotate(-8deg);}
  .brand-swatch.s1{transform:translate(-132px,12px) rotate(-24deg)}
  .brand-swatch.s2{transform:translate(64px,4px) rotate(20deg)}
  .brand-swatch.s3{transform:translate(105px,22px) rotate(32deg)}
  .growth-bar{transform:scaleY(1);}
  .ai-link.l1{transform:rotate(12deg) scaleX(1)}.ai-link.l2{transform:rotate(-14deg) scaleX(1)}.ai-link.l3{transform:rotate(-17deg) scaleX(1)}.ai-link.l4{transform:rotate(19deg) scaleX(1)}
}